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

Question

我希望基本单元格每边 20 像素。然后我希望 «merged cells»(rowspan 或 colspan > 1)的大小与它们覆盖的基本单元格数量相匹配。

为了实现这一点，我手动设置了那些合并单元格的宽度。但在某些配置中，它的行为很奇怪，如上图所示。

蓝色方 block 覆盖 2x2 单元格并且大小正确。但是绿色方 block (以及所有其他大方 block )是 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 结构，因为它是动态生成的(实际上有一个合并单元格的脚本)。所以我能做的就是风格。

Answer 1

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

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