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 */
}

編集（2013）：OS XのSafari 6に注意してください、それはtable-layout: fixed; 間違っています（または、おそらく異なるだけで、他のブラウザーとは非常に異なります。CSS2.1RECテーブルのレイアウトを校正しませんでした;））。さまざまな結果に備える。

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

デモ。

要素で使用max-width: 0するだけでdisplay: table-cellうまくいきました：

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

交換する

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

と

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

divをテーブルのように動作させることに関するすべての問題を確認してください。テーブルレイアウトを模倣するためにtable-xxxを追加する必要があった

テーブルはサポートされており、すべてのブラウザーで非常にうまく機能します。なぜそれらを捨てるのですか？彼らがそれらを模倣しなければならなかったという事実は、彼らが彼らの仕事をうまくやった証です。

私の意見では、ジョブに最適なツールを使用し、表形式のデータまたは表形式のデータテーブルに似たものが機能するかどうかを確認します。

非常に遅い返信私は知っていますが、発言する価値があります。

これはみんなのために働くでしょう

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

これは、反復によって作成されたテーブルデータでも機能します。

どうぞ：

http://jsfiddle.net/damsarabi/gwAdA/

表示はテーブルセルであるため、width：100pxは使用できません。ただし、Max-width：100pxを使用できます。その後、ボックスが100pxを超えることはありません。ただし、他のセルに出血しないように、overflow：hiddenを追加する必要があります。また、空白を追加することもできます。高さが増加しないようにするには、nowrapを使用します。

これを行うには、テーブルセルのスタイルをに設定しwidth: auto、コンテンツを空にします。列の幅は等しくなりましたが、コンテンツはありません。

セルにコンテンツを挿入するにはdiv、css付きのを追加します。

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

またposition: relative、セルに追加する必要があります。

これで、実際のコンテンツを上記のdivに入れることができます。

https://jsfiddle.net/vensdvvb/