不正确的表渲染

Question

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="150" colspan="2" ></td> 
    <td width="75" colspan="1" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1"></td> 
    <td width="150" colspan="2"></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
</tbody> 
</table> 

此表看起来像

http://gridwizard.rayz.ru/images/correct.gif

但在现实

http://gridwizard.rayz.ru/images/incorrect.gif

有什么办法呢？

Answer 1

四件事情：

1. colspan="1"不是必需的。这是默认值;
2. 你应该倾向于CSS。你在做什么是不赞成的;
3. 你不需要在每个单元格的宽度。只有第一个（每列）就足够了;和
4. 使用<col>元素显式布局您的列。

例如：

#mytable { width: 300px; height: 100px; border: border-collapse: collapse; } 
#mytable td { border: 1px solid none; } 

与：

<table id="mytable"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<tbody> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
</tbody> 
</table> 

Answer 2

发生这种情况是因为您只定义了两列，并且一旦定义了足够的跨度列，colspan才能正常工作。

您可以创建一个由3个单元格组成的虚拟行来定义您的结构，然后跨越将工作。然而，你的手杖和间距会导致你桌子上的一个小小的空隙，所以我建议你使用填充来填充<td>的坐标而不是直接放在桌子上。然后，您可以通过不设计样式来隐藏虚拟列。

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="100"></td> 
    <td width="100"></td> 
    <td width="100"></td> 
    </tr> 
    <tr> 
    <td colspan="2">e</td> 
    <td colspan="1">e</td> 
    </tr> 
    <tr> 
    <td colspan="1">e</td> 
    <td colspan="2">e</td> 
    </tr> 
</tbody> 
</table> 

另一种方法是创建一个合适的表头（<thead> ... </thead>），您标记列，并把细胞在那里。