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

Question

我希望基本单元格每边 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/

---

编辑²：我不能真正改变 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>