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

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