如何实现HTML表格的多层Colspan？现有代码失效求助

你的代码核心问题是在<th/td>单元格内直接嵌套标签，这不符合HTML表格的结构规范（表格结构必须是table → tr → th/td，不能在单元格里直接放行元素），导致colspan设置完全失效。

针对你的预期效果，这里提供两种正确实现方式：

方式一：嵌套表格（贴合原有结构） #

把需要拆分的单元格（Data2、Data5）做成嵌套表格，既能保留外层表格的colspan布局，又能在单元格内实现子列拆分：

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
/* 去掉嵌套表格的左右边框，避免重复线条 */
.nested-table td {
  border-left: none;
  border-right: none;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="3">Head1</th>
    <th>Head2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td colspan="2">
      <table class="nested-table" style="width:100%">
        <tr>
          <td>Data 2a</td>
          <td>Data 2b</td>
        </tr>
      </table>
    </td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td colspan="2">
      <table class="nested-table" style="width:100%">
        <tr>
          <td>Data 5a</td>
          <td>Data 5b</td>
        </tr>
      </table>
    </td>
    <td>Data 6</td>
  </tr>
</table>
</body>
</html>

方式二：重新规划列结构（无嵌套） #

如果不想用嵌套表格，可以重新定义表格列数，通过colspan和rowspan配合实现布局：

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <!-- 第一行：Head1跨3列，Head2占1列 -->
  <tr>
    <th colspan="3">Head1</th>
    <th>Head2</th>
  </tr>
  <!-- 第二行：Data1跨行，Data2a、Data2b各占1列，Data3跨行 -->
  <tr>
    <td rowspan="2">Data 1</td>
    <td>Data 2a</td>
    <td>Data 2b</td>
    <td rowspan="2">Data 3</td>
  </tr>
  <!-- 第三行：Data4、Data5a、Data5b、Data6各占1列 -->
  <tr>
    <td>Data 4</td>
    <td>Data 5a</td>
    <td>Data 5b</td>
    <td>Data 6</td>
  </tr>
</table>
</body>
</html>

注：第一种方式更贴合你原有代码的逻辑，第二种适合需要严格统一列对齐的场景。

内容的提问来源于stack exchange，提问作者noob