CSS table-cell等宽

Question

我在表容器中有一些不确定的table-cell元素.

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

是否有一种纯CSS方法可以使表格单元格的宽度相等,即使它们的内容大小不同？

谢谢.

编辑:拥有最大宽度需要知道我认为你有多少个细胞？

Answer 1

这是一个有不确定数量的细胞的工作小提琴:http://jsfiddle.net/r9yrM/1/

您可以为每个父级div(表格)修改宽度,否则它将像往常一样100%.

诀窍是table-layout: fixed;在每个单元格上使用和一些宽度来触发它,这里是2%.这将触发另一个表algorightm,浏览器非常努力地遵守指示的尺寸.
请使用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表格布局;)).准备好不同的结果.

Answer 2

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

DEMO.

Answer 3

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

Answer 4

更换

  <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以模仿表布局

支持表并在所有浏览器中都很好地工作。为什么要抛弃他们？他们必须模仿他们的事实证明他们做得很好。

在我看来，使用最好的工具来完成这项工作，如果您希望使用表格数据或类似于表格数据表的东西就可以使用。

我知道很晚的回复，但值得发言。