プログラミングこんにちは。いっとくです!つい先日テーブル要素を使って作業をしていたところ、tableタグ内のtdに対してmax-heightの設定ができなかったので、その理由と解決方法について。スポンサードリンクやりたかったことセルに入ってくるテキストが長いものであればmax-heightの大きさまでは縦幅を伸ばして、それ以上の長さのテキストはスクロールにしたい!とりあえずテーブルにクラスを与えて、その中でmax-heightを指定すればできるべ。思ってやってみたものの、全然効果なし。クラス名もあってるし、優先順位で他のプロパティに負けてるのかと思ったけど、ディべロッパーツールを見ても、正しく読み込めているっぽい。動いてない!ちくしょう!これだからHTMLとかCSSは嫌なんだ!エラーの一つでも出してくれればわかりやすいのに、沈黙してます。沈黙の臓器と言われている肝臓と同じですね、本当に。マジでヤバくなるまで自覚症状は出ませんみたいな。セルのmax-heightが動いていない原因こう言われちゃなんの反論もしようがないのですが、、、そういう仕様です!なので覚えるしかありません。いうことでちょっと色々なパターンで試してみました。heightとwidthが効くかどうか。テーブルを作り、セルの高さと幅を指定します。</table></body></html>すると、読み込んだ結果は以下のようなテーブルに縦も横も指定した通りになっているので、widthとheightは効いていますね!ちなみにheightに関しては、中の要素がセルの高さよりも大きくなると、CSSで指定したheightは無視され、セルの高さは中の要素の高さに合わせられます。overflowを指定して、はみ出た分の処理を記述しても、セルそのものが大きくなっているため、はみ出たと認識されず動きません。続いてmin-heightとmin-widthを指定してみましょう。</tbody></table>読み込んだ結果は以下のようにmin-widthは効いてるけど、min-heightは完全無視されてます!では最後にmax-heightとmax-widthを試します。</tbody></table>これを読み込むと以下のようになります。横幅はCSSに忠実ですが、縦のmax-wdithは無視されてセルが巨大化してます。ここでoverflowを指定しても結果は同じです。要するにテーブル要素のセルの高さは、内側の要素が大きいとそれに合わせるという仕様になっているようです。最大値を指定するmax-heightは最大値を指定してもテーブルの仕様で無視されてしまうわけですね。ことで長いテキストが入るセルだけスクロールにする方法ということで、長いテキストが入ってくるセルだけスクロールにする方法です。これはシンプルにtdの中にtdと同じサイズのdivを入れて、divに対してmax-heightとoverflow-yを指定すればオッケーです。</tbody></table>これで、中の要素が大きいセルだけだけ、スクロールにすることができます!本当動かないならちゃんとコンソールにエラーでも出してくれればいいのにって感じもしますが、これがHTMLとCSSなんだということで飲み込んでいきましょう!以上、いっとくでした!おしまい!スポンサーリンクシェアするツイートフォローするいっとく関連記事LaravelのアプリケーションをXserverで動かす方法|PHP&MySQL&Apache2こんにちは。最近友人が個人事業主になったので、ほぼボランティアみたいな感じでホームページを作りました。...記事を読む【PHP】小数を四捨五入したり、切り捨て、切り上げする方法と、注意すべき戻り値の話こんにちは。楽しすぎて仕事中も遊びの延長みたい。BYとCASEを組み合わせて任意の並べ替えをする方法こんにちは。...記事を読むMacに最新のPythonをインストールする方法|環境構築こんにちは。いうこ...記事を読む僕はDockerをなんとなくで使っている...!そんな人にオススメの入門書こんにちは。営業からWebエンジニアに転職して、早いもので1年経ちそうです。コメントをキャンセルメールアドレスが公開されることはありません。*サイトスポンサーリンク検索このサイトについて1年ちょっとリゾートバイトをして100万円を貯めたのち、セブにてIT留学!現在は都内のWEB制作会社にてエンジニアとして楽しくお仕事中。できる限り面白く書くことをモットーにお香や本のレビュー、プログラミングを中心に記事を書いてます。