CSS 表格-单元格等宽

在一个表容器中有不确定数量的表单元格元素。

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

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

有一个最大宽度将需要知道有多少细胞，你认为？

289252 次浏览
小开

超文本标示语言

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

演示。

小开

给你:

Http://jsfiddle.net/damsarabi/gwada/

不能使用宽度: 100px，因为显示为 table-cell。但是，您可以使用最大宽度: 100px。那么你的盒子永远不会超过100px。但是您需要添加溢出: 隐藏以确保连接不会流向其他单元格。您还可以添加空白: nowrap，如果您希望保持高度不增加。

小开
最佳答案

这里是一个工作小提琴与不确定数量的细胞: 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.1 REC 表布局;)。为不同的结果做好准备。

小开

替换

  <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-cell 样式设置为 width: auto，内容为空来实现。列现在是等宽的，但不包含任何内容。

要向单元格插入内容，请添加一个带 css 的 div:

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

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

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

Https://jsfiddle.net/vensdvvb/

小开

只是在 display: table-cell元素中使用 max-width: 0对我来说很有效:

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

小开

这对每个人都有用

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

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


提交答案