谷歌浏览器:零宽度表格单元占用空间

Question

我有一张三人桌<td />.其中两个有width属性和风格0px.
中间<td />没有明确的width设定.

JsFiddle在这里

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tbody>
        <tr>
            <td width="0" height="10" bgcolor="" style="background-color:#00ffff;height:10px;width:0px;"></td>
            <td height="10" bgcolor="" style="background-color:#000;height:10px;"></td>
            <td width="0" height="10" bgcolor="" style="background-color:#ff00ff;height:10px;width:0px;"></td>
        </tr>
    </tbody>
</table>

我希望这个中间<td />会占用整个空间(这就是Firefox和IE中发生的事情)

但是,在谷歌浏览器中,三者<td />都占用了相同的空间.

这是为什么？
2.这是Chrome中的错误吗？
3.有一个简单的解决方案吗？

Answer 1

看起来Firefox和IE具有表的默认属性"table-layout:fixed".但Chrome没有将此作为默认属性.所以我们需要像下面这样强制使用chrome.

 table {
border-collapse: collapse;
border-spacing: 0;
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-vertical-spacing: 0px;
table-layout:fixed;
}

DEMO