152

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

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

それらの中に異なるサイズのコンテンツがある場合でも、テーブルセルを同じ幅にする純粋な CSS の方法はありますか?

最大幅を持つことは、あなたが持っているセルの数を知ることを伴いますか?

4

7 に答える 7

311

これは不確定な数のセルを持つ実用的なフィドルです: http://jsfiddle.net/r9yrM/1/

div各親( table ) に幅を固定できます。そうしないと、通常どおり 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.1 REC テーブル レイアウトを校正しませんでした;))。さまざまな結果に備えてください。

于 2012-05-10T01:09:32.297 に答える
30

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;
}

デモ。

于 2012-05-10T00:03:16.583 に答える
8

交換

  <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 を追加する必要がありました

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

私の意見では、仕事に最適なツールを使用してください。表形式のデータまたは表形式のデータテーブルに似たものが必要な場合は、うまく機能します。

非常に遅い返信私は知っていますが、声を上げる価値があります.

于 2014-04-22T03:54:05.800 に答える
-1

どうぞ：

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

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

于 2012-05-10T00:04:53.090 に答える