有没有一种方法可以使用HTML/CSS(具有相对大小)使一行单元格延伸到包含它的表格的整个宽度?
单元格的宽度应该相等,外部表格的大小也是动态的,为<table width="100%">
.
目前,如果我没有指定一个固定的大小;细胞只是自动调整大小以适应其内容.
有没有一种方法可以使用HTML/CSS(具有相对大小)使一行单元格延伸到包含它的表格的整个宽度?
单元格的宽度应该相等,外部表格的大小也是动态的,为<table width="100%">
.
目前,如果我没有指定一个固定的大小;细胞只是自动调整大小以适应其内容.
你甚至不需要为细胞设置一个特定的宽度,table-layout: fixed
个就足以均匀地分布细胞.
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
,表格样式元素必须设置宽度(在我的示例中为table-layout
%).