CSS表格单元格忽略宽度，即使表格已固定

Question

我想要一个带有display: table-cell的div display: table-cell设置了百分比宽度的display: table-cell 。 display: table-cell是我最好的选择，我需要多个并排的div高度相等。

研究之后，我将父级设置为正确display: table; table-layout: fixed; width: 100% display: table; table-layout: fixed; width: 100% display: table; table-layout: fixed; width: 100%在其他许多线程中发现的display: table; table-layout: fixed; width: 100% ，但table-cell仍填充父级。

 .table-wrapper { display: table; table-layout: fixed; width: 100%; } .table-cell { display: table-cell; width: 25%; overflow: hidden !important; border: 1px solid black; } 

 <div class="table-wrapper"> <div class="table-cell"> Should be 25%, but it fills .table-wrapper </div> </div> 

这不可能吗？

Answer 1

您可以使用单个block元素解决此问题。

 .table-wrapper { display: table; table-layout: fixed; width: 100%; border: 1px solid green; } .table-cell { display: table-cell; width: 25%; overflow: hidden !important; border: 1px solid black; } 

 <div class="table-wrapper"> <div class="table-cell"> Should be 25%, but it fills .table-wrapper </div> <div><div/> </div> 

Answer 2

标签总是会填满它，因为在每个...的末尾都有一个回车符。 但是，尽管如此。 因此，我建议使用没有回车符的标签。 希望能减轻一些挫败感...我不得不学习艰难的方法！