如何实现关联双行表头的跨行单元格HTML表格？

问题需求 #

• 顶部3个<th>表头需设置scope="col"；左侧3个<th>表头需设置scope="row"
• 第五行的<td>单元格需同时关联左侧两个行表头（即同时属于两个跨行行表头的覆盖区域）

原代码错误点 #

你的核心问题是行结构逻辑混乱：

1. row head 2设置了rowspan="3"，但后续行没有对应匹配这个跨行的行数，导致row head 3的起始位置错位
2. 你尝试让第五行单元格跨2行，但没考虑row head 3的跨行起始位置，导致单元格与表头的归属关系混乱

正确实现代码 #

CSS样式（保持原有样式即可） #

th, td {
  border: 1px solid black;
}
th {
  background: grey;
  color: white;
}

HTML表格结构 #

<table>
  <caption>The table that hates me</caption>
  <tbody>
    <!-- 顶部列表头 -->
    <tr>
      <th scope="col">col head 1</th>
      <th scope="col">col head 2</th>
      <th scope="col">col head 3</th>
    </tr>
    <!-- 第一行数据 -->
    <tr>
      <th scope="row">row head 1</th>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <!-- row head 2 开始，跨行覆盖3行 -->
    <tr>
      <th scope="row" rowspan="3">row head 2<br>three rows deep</th>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <!-- 第四行：单元格跨2行，同时row head 3开始跨行覆盖5行 -->
    <tr>
      <td rowspan="2">cell (covers rows 4-5)</td>
      <td rowspan="2">cell (covers rows 4-5)</td>
      <th scope="row" rowspan="5">row head 3<br>five rows deep</th>
    </tr>
    <!-- 第五行：单元格已被跨行占用，仅保留空行维持结构 -->
    <tr></tr>
    <!-- row head 3 对应的后续数据行 -->
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>

关键说明 #

1. row head 2的rowspan="3"从自身所在行开始，覆盖第2、3、4行
2. 第4行的<td>设置rowspan="2"覆盖第4、5行，同时在该行插入row head 3并设置rowspan="5"覆盖第4到第8行，这样第4、5行的单元格就同时属于两个行表头的范围
3. 第5行因为单元格已被跨行占用，只需保留空<tr>即可，确保表格结构完整

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