为什么这张桌子看起来不整齐？

Question

我希望基本单元的边长为20px。然后，我希望“合并单元格”（使用rowspan或colspan> 1）具有与它们覆盖的基本单元格大小匹配的大小。

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

蓝色正方形覆盖2x2个单元格，大小正确。但绿色广场（和所有其他大型广场）为5x2，并且应该与其邻居108px一样大。

为什么铬会丢弃我强制的尺寸？ （没有测试其他浏览器）

，你会发现这里的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>