嵌套HTML表格表头适配问题：如何将值正确对应至单元格

问题描述 #

处理带嵌套表头的HTML表格时，设置单元格值后内容跑到表格外部，无法和对应单元格匹配。期望实现的表格结构如下：

|--------------------------------------------------------|
       |          |                                             |
       |          |               TRAINEE L-LEADER              |
       |   DEPT   |---------------------------------------------|
       |          | REG |  PROBI  |  SEAS'L  |       RANK       |
       |          |     |         |          |------------------|
       |          |     |         |          | 3B | 3A | 2A | 1 |
       |--------------------------------------------------------|
       |   COIL   |  2  |    0    |    1     | 3  | 0  | 3  | 1 |
       |--------------------------------------------------------|

问题根源 #

原代码在表头中使用嵌套表格实现RANK的子列，导致表头实际列数和数据行单元格数量不匹配，最终造成数据溢出表格。正确的做法是仅通过colspan和rowspan属性合并单元格，无需嵌套表格。

修正后的代码 #

CSS（微调优化）

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

tr, th, td {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

span {
  color: red;
}

HTML（重构表头结构）

<table>
  <thead>
    <!-- 第一行：DEP'T 跨4行，Trainee L-Leader 跨7列 -->
    <tr>
      <th rowspan="4">DEP'T</th>
      <th colspan="7">Trainee L-Leader</th>
    </tr>
    <!-- 第二行：REG/PROBI/SEAS'L 各跨2行，RANK 跨4列 -->
    <tr>
      <th rowspan="2">REG</th>
      <th rowspan="2">PROBI</th>
      <th rowspan="2">SEAS'L</th>
      <th colspan="4">RANK</th>
    </tr>
    <!-- 第三行：RANK的子列 -->
    <tr>
      <th>3B</th>
      <th>3A</th>
      <th>2A</th>
      <th>1</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行：单元格数量与表头拆分后列数完全匹配 -->
    <tr>
      <td>COIL</td>
      <td>2</td>
      <td>0</td>
      <td>1</td>
      <td>3</td>
      <td>0</td>
      <td>3</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

关键调整说明 #

1. 移除嵌套表格，用colspan="7"让Trainee L-Leader覆盖后续7列（REG、PROBI、SEAS'L + RANK下的4列）
2. 给REG、PROBI、SEAS'L设置rowspan="2"，使其跨表头第二、第三行
3. RANK表头用colspan="4"覆盖其下4个子列
4. 数据行单元格数量（8个）与表头拆分后的实际列数完全对应，确保值能正确匹配到单元格

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