表セルに min-height を効かせてみるテスト

公開日:

min-height と max-height の適用対象は、CSS仕様書にはこう定義されています。

all elements but non-replaced inline elements, table columns, and column groups

all elements but non-replaced inline elements, table rows, and row groups

ただし、CSS 2.1仕様書の本文を読むとこんなことが書いてあります。

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

CSS 2.1 においては、table や table-cell へ min-height, max-height を指定したときの視覚効果は定義しないということらしいです。

実際に各ブラウザはどんな描画になるのか試してみました。なお、max-heightはどれも効かなかったので下表には含めていません。

ブラウザtableへのmin-heighttbodyへのmin-heighttrへのmin-heighttdへのmin-height
Firefox 21効かない効かない効かない効かない
Google Chrome 26効く効かない効かない効かない
Internet Explorer 7効かない効かない効かない効かない
Internet Explorer 8効く効かない効く効く
Internet Explorer 9効くバグ?効く効く
Internet Explorer 10効くバグ?効く効く
Opera 12.1効く効かない効かない効かない

IE9, 10でtbody要素へ min-height を設定した場合、なぜかtr要素への指定時と同じ結果になってしまいます(tbody全体でなく、各列が指定した高さになる)。

とまあこのように、td要素への min-height 指定はIE以外効かないという結果になりました。セルの最小高さを設定したい時は、こんな指定をするのはどうでしょうか。

td:first-child:before {
  display: block;
  float: left;
  height: 100px; /* この値は適宜書き換える */
  content: "";
}

表のどこかの列がth要素で統一されている場合は、 td:first-child:before の代わりに th:before でも構いません。

IE7は表関連への min-height が効かないうえに :before疑似要素にも対応していないので、IE7以下が要件に入っている場合はほかの方法を考える必要がありますが、そうでなければこれで良いのではないかと。