☰

CSS テーブルセルの等幅 質問する

tag-icon • tag-icon html css html-table
CSS テーブルセルの等幅 質問する

テーブル コンテナー内に不確定な数のテーブル セル要素があります。

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

テーブルセル内に異なるサイズのコンテンツがあっても、テーブルセルの幅を等しくする純粋な CSS の方法はありますか?

最大幅を設定するには、セルがいくつあるかを知る必要があると思いますか?

ベストアンサー1

不確定な数のセルを持つ動作するフィドルを次に示します。http://jsfiddle.net/r9yrM/1/

それぞれの親の幅を固定することができますdiv（テーブル）、それ以外の場合は通常通り 100% になります。

コツはtable-layout: fixed;セルの幅を2%に設定してトリガーします。他のテーブル アルゴリズム。ブラウザーは指定された寸法を尊重するように非常に努力します。Chrome
(および必要に応じて IE8 以降) でテストしてください。最近の Safari では問題ありませんが、このトリックが Safari と互換性があるかどうかは覚えていません。

CSS（関連指示）：

div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

編集（2013）：OS XのSafari 6には注意してください。table-layout: fixed; 間違っている(または、他のブラウザとは単に大きく異なるだけかもしれません。CSS2.1 REC テーブル レイアウトは校正していません ;) )。異なる結果になる可能性があることを覚悟してください。

おすすめ記事