相同大小的表格单元格以填充包含表格的整个宽度 [英] Equal sized table cells to fill the entire width of the containing table
问题描述
有没有办法使用 HTML/CSS(具有相对大小)使一行单元格拉伸包含它的表格的整个宽度?
Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?
单元格的宽度应该相等，并且外部表格的大小也是动态的， The cells should be equal widths and the outer table size is also dynamic with 目前如果我没有指定固定大小；单元格只是自动调整大小以适应其内容. Currently if I don't specify a fixed size; the cells just autosize to fit their contents. 你甚至不必为单元格设置特定的宽度， You don't even have to set a specific width for the cells, 请注意，要使 Note that for 这篇关于相同大小的表格单元格以填充包含表格的整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！.
<table width="100%">.推荐答案
table-layout: fixed 就足以让单元格均匀分布.table-layout: fixed suffices to spread the cells evenly.ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz</li>
</ul>table-layout 工作，表格样式元素必须设置宽度(在我的示例中为 100%).
table-layout to work the table styled element must have a width set (100% in my example).
登录
关闭
