Html 不正确的表呈现

这张桌子看起来应该像

（来源：）

但实际上

（来源：）

---

有什么解决方案吗？

之所以会出现这种情况，是因为您只定义了两列，而colspan只在定义了足够多的列后才起作用

您可以创建一个包含3个单元格的虚拟行来定义您的结构，然后跨越就可以工作了。但是，单元格填充和间距会导致表格顶部出现轻微的间隙，因此我建议将填充应用于

的vis css，而不是直接应用于表格中。然后，可以通过不设置伪列的样式来隐藏它

<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>

E
E
E
E

另一种选择是创建一个合适的表头（

…

），在那里标记列并将单元格放在其中。

四件事：

colspan=“1”

不是必需的。它是默认值

你应该喜欢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>

与：

...
...
...
...
...
...
...
...

3列不是必需的。检查原始问题中的正确形式。我想，在

td

样式中指定宽度将完全相同，无需像这样单独定义

col

。只要去掉“col”就可以了。你说什么？在这种情况下，设置TD元素宽度的问题是没有明确的中间列。它由左列和右列的colspan隐式定义。使用COL元素可以避免这个问题。Thanx很多！：）这正是我需要的！我试着不用

col

，它工作起来很有魅力。事实上，我写了答案，但后来发现你已经回答了几乎完全相同的我起草。唯一的区别是我没有放置

col

标记，当然使用

colspan

。只给了

td

样式的宽度。至少我在firefox工作。对IE或其他人不确定。

#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>