CSS表格等宽
我有一个表格容器内的不确定数量的表格单元格元素。
<div style="display:table;"> <div style="display:table-cell;"></div> <div style="display:table-cell;"></div> </div> 有没有一种纯CSS的方式来获得表格单元格是相等的宽度，即使他们有不同大小的内容？
谢谢。
编辑：有一个最大宽度将需要知道有多less单元格，我想？
这是一个工作小提琴不确定数量的细胞： http : //jsfiddle.net/r9yrM/1/
你可以修改每个父div （ 表格 ）的宽度，否则将像往常一样100％。
诀窍是使用table-layout: fixed; 并在每个单元格上触发一些宽度，这里是2％。 这将触发另一个表algorightm，这是浏览器非常难以尊重所示尺寸的那个表。
请使用Chrome（和IE8-如果需要）进行testing。 最近的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; 错误的 （也许只是不同的，与其他浏览器非常不同，我没有certificate – 读取CSS2.1 REC表格布局;））。 准备好不同的结果。
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。
在display: table-cell使用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>
更换
<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>
看看围绕试图让表格执行的所有问题。 他们不得不添加table-xxx来模拟表格布局
所有浏览器都支持表格并且工作得很好。 为什么沟他们？ 他们不得不模仿他们的事实certificate他们做得很好。
在我看来，使用最好的工具工作，如果你想列表数据或类似的制表数据表的工作。
非常晚回复我知道，但值得expression。
干得好：
http://jsfiddle.net/damsarabi/gwAdA/
你不能使用宽度：100像素，因为显示器是表格单元格。 但是，您可以使用最大宽度：100px。 那么你的盒子将永远不会超过100px。 但是你需要添加overflow：hidden来确保这个区域不会渗透到其他单元格。 如果你想保持高度不增加，你还可以添加空白：nowrap。
这可以通过将table-cell样式设置为width: auto和content为空来完成。 列现在是等宽的，但没有内容。
要将内容插入单元格，请添加一个带CSS的div ：
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
您还需要添加position: relative对于单元格。
现在你可以把实际的内容放在上面讨论的div中。
