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

EDIT（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来模仿表格布局

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

在我看来，使用最适合工作的工具，如果你想要制表数据或类似于制表数据表的东西，那就可以了。

非常迟到的回复我知道但值得发声。

Answer 5

这对每个人都适用

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

这也适用于通过迭代创建的表数据

Answer 6

你走了：

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

您不能使用宽度：100px，因为显示是表格单元格。但是，您可以使用最大宽度：100px。然后你的盒子永远不会超过100px。但是你需要添加overflow：hidden以确保该对象不会流失到其他单元格。如果你想保持高度增加，你也可以添加白色空间：nowrap。

Answer 7

这可以通过将table-cell样式设置为width: auto并将内容设置为空来完成。这些列现在是等宽的，但没有内容。

要向单元格插入内容，请使用css：

添加div

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

您还需要将position: relative添加到单元格中。

现在，您可以将实际内容放入上面讨论的div中。

https://jsfiddle.net/vensdvvb/

CSS table-cell等宽

7 个答案: