表細胞看起來忽略了固定的寬度

我的建築：表細胞看起來忽略了固定的寬度

<div style="display: table;"> 
    <div style="display: table-cell; width: 50px; background-color: red;">a</div> 
    <div style="display: table-cell; width: 100%; background-color: green;">...</div> 
    <div style="display: table-cell; width: 50px; background-color: red;">a</div> 
</div>

http://jsfiddle.net/5PgzT/

邊緣列應保持50像素的寬度，還是它就像我沒有設置任何

來源

2014-02-20 John Smith

爲什麼不只是使用表格？ – Phil

首先，父<div>沒有明確的width，您也可能需要使用table-layout: fixed;以及：

<div style="display: table; width: 100%; table-layout: fixed;"> 
    <div style="display: table-cell; width: 50px; background-color: red;">a</div> 
    <div style="display: table-cell; width: 100%; background-color: green;">...</div> 
    <div style="display: table-cell; width: 50px; background-color: red;">a</div> 
</div>

WORKING DEMO

來源

2014-02-20 16:21:00

或者（不太優雅的解決方案），您可以使用'min-width：50px' – Thundar

這裏發生的是中央臺細胞被拉伸到一個未定義值的100％。嘗試給予表格寬度並讓中心單元自行排列，而不是定義：

<div style="display:table; width:400px;"> 
    <div style="display:table-cell; width:50px; background-color: red;">&nbsp;</div> 
    <div style="display:table-cell; background-color: green; width:auto;">content</div> 
    <div style="display:table-cell; width:50px; background-color: red;">&nbsp;</div> 
</div>

來源

2014-02-20 16:41:51 pmcneil18

表細胞看起來忽略了固定的寬度

回答

相關問題