为什么这张桌子不整洁？

Question

我希望基本单元格每边20px。然后我想要“合并的单元格”（与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结构，因为它是动态生成的（实际上有一个合并单元格的脚本）。所以我能采取的行动就是风格。

Answer 1

如果您更改百分比：这有帮助吗？

<table
    <tbody>
        <tr>
            <td ></td>
            <td colspan="9" rowspan="1" style="width: 90%; height: 20px; "></td>
        </tr>
        <tr>
            <td  colspan="8" rowspan="1" style="width: 80%; height: 20px; "></td>
            <td ></td>
            <td ></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="7" rowspan="2" style="width: 70%; height: 42px; "></td>
            <td colspan="2" rowspan="2" style="width: 20%; height: 42px; background-color:blue "></td>
        </tr>
        <tr>
            <td ></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2" style="width: 50%; height: 42px; "></td>
            <td  colspan="5" rowspan="2" style="width: 50%; height: 42px; background-color:green "></td>
        </tr>
        <tr></tr>
    </tbody>
</table>

how it should look:
<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>
        <tr></tr>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
        </tr>
    </tbody>
</table>

Answer 2

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

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