html - 为什么这张 table 看起来不整洁？

我想基本单元是每边20像素。然后我希望“合并单元格”（rowspan或colspan>1）的大小与它们覆盖的基本单元格的大小匹配。
为此，我手动设置合并单元格的宽度。但在某些配置中，它的行为很奇怪，如上图所示。
蓝色正方形覆盖2x2个单元格，大小正确。但是绿色正方形（以及所有其他的大正方形）是5x2，应该和它的邻居108px一样大。
为什么chrome放弃了我强制的尺寸？（我没有测试其他浏览器）
你可以在这里找到一个jsFiddle：http://jsfiddle.net/kjshk/
HTML如下：

<table>
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td>
        </tr>
    </tbody>
</table>​

编辑：
我用jsFiddle的外观更新了它，但是增加了一行，强制正确的大小
http://jsfiddle.net/kjshk/11/
editè：我无法真正更改HTML结构，因为它是动态生成的（实际上有一个合并单元格的脚本）。所以我能表演的就是风格。

最佳答案

表格单元格中的宽度始终被解释为准则而不是规则。table-layout:fixed执行规则。

<table style="table-layout:fixed;">
    <colgroup>
        <col style="width: 20px" span="10" />
    </colgroup>
    <tbody>
        ...
    </tbody>
</table>

关于html - 为什么这张 table 看起来不整洁？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12862312/