tableのth、tdでwidthがうまく効かないときにやったこと

コーディング
CSS html 備忘録

結論

tableにスタイル width: 100%; table-layout: fixed;をつける

table-layout: fixed;をつける

table-layoutは CSS のプロパティで、<table> のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/table-layout

fixedはテーブル（表）の列幅を固定レイアウトにするみたい。

table{
  width: 100%;
  table-layout: fixed;
}

※table-layout:fixed;を指定した上でth,tdに幅を指定しない場合は、すべての列幅が均等になります。

table-layoutの種類

キーワード値

  • table-layout: auto;
  • table-layout: fixed;

グローバル値

  • table-layout: inherit;
  • table-layout: initial;
  • table-layout: unset;

これで大体解決するけど、横幅がミチミチになってるときは他の要素がセルからはみ出ちゃうことがあります。。

こんなふうになる

こんなときはwhite-space: nowrap;とoverflow-x:auto;でスクロールバーをつけるとなんとかなりました。

th,tdにwhite-space: nowrap;をつける

うーん・・・スクロールバーありきなのが気になるけど、どうしても幅指定したい場合の方法としてメモしました。

更に検証1:colspanが指定してあるときの横幅が効かない

限定的だけど横幅が狭い且つtable-layout:fixed;を指定したうえでcolspanがあるとき、赤色の部分はwidthを指定しても効かないです。

こんなときはtable-layout:auto;に戻します。

更に検証2:クラスをつけずにcolspanに対して幅を指定する

ネットの海を漂ってたら便利そうな使い方があったのでメモ。

属性セレクターを使ってtd[colspan="xx"]とすることで幅指定ができるみたい。

td[colspan="3"] {
width: calc(100% / 8 * 3);
}

codepen参考：https://teratail.com/questions/127345

参考サイト

こちらのサイトに詳細に書かれてます、すごくわかりやすいです。

SHARE!