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

投稿

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

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

10.7 Minimum and maximum heights: 'min-height' and 'max-height' (CSS 2.1)(W3C)

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

8. The ‘min-width’, ‘max-width’, ‘min-height’ and ‘max-height’ properties (CSS 3)(W3C)

ただし、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-height tbodyへのmin-height trへのmin-height tdへの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以下が要件に入っている場合はほかの方法を考える必要がありますが、そうでなければこれで良いのではないかと。