tableのth,tdにwidthが効かない時

表の見出し部分だけwidthを指定したい!でもなぜか効かない・・・
そんな時は、tableタグに下記CSSを入れるだけで解決します。

width: 100%;
table-layout: fixed;

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

上記のサイトのデモ部分を触ってみると違いがわかりやすいと思います。
何も指定しなければ、table-layout: auto; が効いているため、
セル内容に合わせてthやtdの幅が自動で決定されます。

table-layout: fixed; にしていても、widthを指定していないセルは、
残りの幅を均等に割った幅になるようです。

タイトルとURLをコピーしました