Question

我的建设：

<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/

边缘列应该保持50px宽度，仍然像我没有设置任何东西

Answer 1

首先，父<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

Answer 2

这里发生的是中心表格单元拉伸到未定义值的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>

table-cell看起来像忽略固定宽度

2 个答案: