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（表格）固定一个宽度，否则它将像往常一样为 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 表格布局；））。为不同的结果做好准备。

于 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 回答
19

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

于 2017-04-12T10:39:52.037 回答
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 回答
2

这对每个人都有效

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

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

于 2018-08-25T03:36:26.477 回答
0

这可以通过将表格单元格样式设置为width: auto和内容为空来完成。列现在等宽，但不包含任何内容。

要将内容插入单元格，请添加div带有 css 的内容：

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

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

现在您可以将实际内容放入上面谈到的 div 中。

https://jsfiddle.net/vensdvvb/

于 2016-05-05T01:59:58.300 回答
-1

干得好：

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

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

于 2012-05-10T00:04:53.090 回答