即使使用表格固定，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

的標籤將永遠填補它，因爲沒有對每一個......最終回車這是非常狡猾的人做到這一點瓦特/出任何文件吧！但是，儘管如此。所以，我建議使用一個沒有回車符的標籤。希望能減少一些挫折感......我必須學習艱難的道路！