Html CSS 表格单元格等宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10525744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS table-cell equal width
提问by Harry
I have an indeterminate number of table-cell elements inside a table container.
我在表格容器中有不确定数量的表格单元格元素。
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them?
是否有一种纯 CSS 方法可以使表格单元格的宽度相等，即使它们中有不同大小的内容？
Thanks.
谢谢。
Edit: Having a max-width would entail knowing how many cells you have I think?
编辑：拥有最大宽度需要知道我认为你有多少个单元格？
回答by FelipeAls
Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/
这是一个不确定数量的单元格的工作小提琴：http: //jsfiddle.net/r9yrM/1/
You can fix a width to each parent div(the table), otherwise it'll be 100% as usual.
您可以为每个父级div（表格）固定宽度，否则它将像往常一样为 100%。
The trick is to use table-layout: fixed;and some width on each cell to trigger it, here 2%. That will trigger the othertable algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.
诀窍是table-layout: fixed;在每个单元格上使用一些宽度来触发它，这里是 2%。这将触发另一个表 algorightm，浏览器非常努力地遵守指示的维度。
请使用 Chrome（和 IE8- 如果需要）进行测试。最近的 Safari 没问题，但我不记得这个技巧与它们的兼容性。
CSS (relevant instructions):
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): Beware of Safari 6 on OS X, it has table-layout: fixed;wrong(or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.
编辑（2013 年）：当心 OS X 上的 Safari 6，它有table-layout: fixed;错误（或者可能只是不同，与其他浏览器非常不同。我没有校对 CSS2.1 REC 表格布局；））。准备好迎接不同的结果。
回答by The Alpha
HTML
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
CSS
.table{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell{
display:table-cell;
width:100px;
border:solid black 1px;
}
回答by José Antonio Postigo
Just using max-width: 0in the display: table-cellelement worked for me:
只是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>回答by DeveloperChris
Replace
代替
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
with
和
<table>
<tr><td>content cell1</td></tr>
<tr><td>content cell1</td></tr>
</table>
Look at all the issues surrounding trying to make divs perform like tables. They had to add table-xxx to mimic table layouts
看看试图让 div 像表格一样执行的所有问题。他们不得不添加 table-xxx 来模仿表格布局
Tables are supported and work very well in all browsers. Why ditch them? the fact that they had to mimic them is proof they did their job and well.
支持表格并且在所有浏览器中都能很好地工作。为什么要抛弃他们？他们必须模仿他们的事实证明他们做得很好。
In my opinion use the best tool for the job and if you want tabulated data or something that resembles tabulated data tables just work.
在我看来，使用最好的工具来完成这项工作，如果你想要表格数据或类似于表格数据表的东西就可以了。
Very Late reply I know but worth voicing.
我知道很晚的回复，但值得发声。
回答by tcasante1
this will work for everyone
这对每个人都有效
<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>This will also work for table data created by iteration
这也适用于迭代创建的表数据
回答by RnMss
This can be done by setting table-cell style to width: auto, and content empty. The columns are now equal-wide, but holding no content.
这可以通过将表格单元格样式设置为width: auto和内容为空来完成。列现在等宽，但没有内容。
To insert content to the cell, add an divwith css:
要将内容插入单元格，请添加一个divwith css：
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
You also need to add position: relativeto the cells.
您还需要添加position: relative到单元格中。
Now you can put the actual content into the div talked above.
现在您可以将实际内容放入上面所说的 div 中。
回答by Sammy
Here you go:
干得好：
http://jsfiddle.net/damsarabi/gwAdA/
http://jsfiddle.net/damsarabi/gwAdA/
You cannot use width: 100px, because the display is table-cell. You can however use Max-width: 100px. then your box will never get bigger than 100px. but you need to add overflow:hidden to make sure the contect don't bleed to other cells. you can also add white-space: nowrap if you wish to keep the height from increasing.
您不能使用 width: 100px，因为显示的是表格单元格。但是，您可以使用 Max-width: 100px。那么你的盒子永远不会超过 100px。但您需要添加 overflow:hidden 以确保连接不会流到其他单元格。如果您希望保持高度不增加，您还可以添加 white-space: nowrap 。
