鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

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.