表格渲染不正确

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>

此表格应为

_{（来源：rayz.ru）}

但实际上

_{（来源：rayz.ru）}

有没有解决方案？

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个单元格的虚拟行来定义您的结构，然后跨越将起作用。但是，你的cellpadding和间距会在你的表顶部产生一个小的间隙，所以我建议将填充应用到<td>的vis css而不是直接在表中。然后，您可以通过不设置样式来隐藏虚拟列。

<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>），在其中标记列并将单元格放在那里。