table要素でセルの幅を指定したいときはtable-layout="fixed"
背景
table要素でレイアウトせざるを得ない!ということでFlexboxで書いたものをセコセコtableへ移していたのですが、CSSでセル(tdやth)の幅を指定してもそのとおりにならないという事象が発生。たとえばこんな感じ。
td.data { width: 100px; }
こう書いても、100pxとならず、内容によっていろいろ変わるという。なんだこれ。
ということで、調べてみたら、table-layout
なる仕様があるとのこと。
table-layout って何
テーブルのレイアウトアルゴリズムを指定するCSSプロパティです。値には以下の2つがあります。
- auto
- fixed
auto
は表のデータを全部読み込んだうえでレイアウトを決定するようです。デフォルトはこちら。
fixed
は1行目だけ読み込んでレイアウトを決定するそうです。
で、auto
はwidthが指定されていてもそれを守らず、いい感じになるように幅を決定するみたいです。
fixed
だと、幅が指定通りになるそうです。
ということで、以下のようにしてあげると、セル幅が指定通りの100pxになりました。
table { table-layout: fixed; } td.data { width: 100px }
ちなみにCSS2.1仕様を見ると、auto
のレイアウトアルゴリズムは仕様できっちり決まっておらず、UA任せのようです。以下抜粋。
UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.