table 在 chrome 单元格没有内容时一直折叠？

Question

css

html,body{height:100%}
.mwh{width:100%;height:100%}
.w75c{width:75%}
.bor,.bor td,.bor th{border:1px teal dashed}

htm

<table class="mwh bor">
    <tr>
        <td></td>
        <td>body</td>
        <td></td>
    </tr>
</table>

问题

当 table 有 bor class 时，第一个和第三个单元格显示它们各自的 12.5% 宽度，但是当 bor class 是删除了两侧的单元格折叠，除非它们像 <td>&nbsp;</td>.

一样内容在其中

有没有办法让这些边格不塌陷？

Answer 1

添加

td {width:30%}

html,body{height:100%}
.mwh{width:100%;height:100%}
.w75c{width:75%}
.bor,.bor td,.bor th{border:1px teal dashed}
td {width:30%}

<table class="mwh bor">
    <tr>
        <td></td>
        <td>body</td>
        <td></td>
    </tr>
</table>

Answer 2

添加

table-layout: fixed;

到tablecss。那么你就不需要固定宽度了。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/812/

CSS:

html, body {
    height:100%
}
.mwh {
    width:100%;
    height:100%;
    table-layout:fixed
}