[解決済み] CSSテーブルセル等幅

質問

テーブルコンテナの中に不特定多数のテーブルセル要素があります。

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

テーブルセル内に異なるサイズのコンテンツがある場合でも、同じ幅になるようにする純粋なCSSの方法はありますか？

最大幅を設定するには、セルの数を把握する必要があると思います。

解決方法は？

以下は、セル数が不定な場合の動作フィドルです。 http://jsfiddle.net/r9yrM/1/

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

コツは table-layout: fixed; と各セルにいくつかの幅をトリガーするために、ここでは2％。これによって その他 テーブルのアルゴリズムで、ブラウザは表示された寸法を尊重しようと懸命に努力します。

Chrome（と必要ならIE8-）でテストしてください。最近の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 */
}

EDIT（2013年）。OS XのSafari 6には注意が必要です。 table-layout: fixed; 誤 (あるいは、他のブラウザと違う、大きく違うだけかもしれません。CSS2.1 RECのテーブルレイアウトを校正していない ;) ). 異なる結果になることを覚悟してください。