即使使用表格固定，CSS表格单元格也会忽略宽度

Question

我想要div与display: table-cell设置百分比宽度。 display: table-cell是我最好的选择，我需要并肩div s是平等的高度。

经过研究，我正确地将父母设置为display: table; table-layout: fixed; width: 100%，如在许多other threads中找到的，但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

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

.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

的标签将永远填补它，因为没有对每一个......最终回车这是非常狡猾的人做到这一点瓦特/出任何文件吧！但是，尽管如此。所以，我建议使用一个没有回车符的标签。希望能减少一些挫折感......我必须学习艰难的道路！