表格单元格看起来像忽略固定宽度

Question

my construction：

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

工作演示

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>