web-dev-qa-db-ja.com

CSSテーブルセルの等幅

私はテーブルコンテナの中に不定数のテーブルセル要素を持っています。

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

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

ありがとう。

編集：最大幅を持つことはあなたが持っているセルの数を知ることを必要とするでしょうか？

htmlcsshtml-table
134
Harry

これは、セルの数が不定の実用的なフィドルです。 http://jsfiddle.net/r9yrM/1/

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

トリックは、table-layout: fixed;とそれをトリガーするために各セルに幅（ここでは2％）を使うことです。これはotherテーブルalgonightm、ブラウザが指示された寸法を尊重することを非常に懸命に試みるものを引き起こすでしょう。
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テーブルのレイアウト;））。さまざまな結果に備えてください。

285
FelipeAls

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

デモ。

23
The Alpha

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>
13
José Antonio Postigo

交換する

  <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を追加しなければなりませんでした

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

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

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

5
DeveloperChris

これは皆のために働くでしょう

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

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

1
tcasante1

どうぞ：

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

表示は表セルなので、width：100pxは使用できません。ただし、Max-width：100pxを使用することはできます。それからあなたの箱は100pxより大きくならないでしょう。しかし、あなたはオーバーフローを追加する必要があります：コンテストが他のセルに出血しないように隠されます。高さが上がらないようにしたい場合は、white-space：nowrapを追加することもできます。

0
Sammy

これは、テーブルセルスタイルをwidth: autoに設定し、コンテンツを空にすることで実行できます。列の幅は同じになりましたが、内容は保持されていません。

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

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

セルにposition: relativeを追加する必要もあります。

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

https://jsfiddle.net/vensdvvb/

0
RnMss