如何在一列下添加多列？及如何延伸Water Body Classification列至D列顶部

1. 如何在一列下方添加多列 #

要实现一列下方拆分多列的效果，核心是用**colspan属性**合并表头单元格，让它横跨下方多列的宽度。比如你的场景中，"Water Body Classification"下方有AA、A、B、C、D共5列，给这个表头单元格设置colspan="5"，它就会占据5列的宽度，下方的行可正常放置5个对应列的单元格。

2. 让"Water Body Classification"列延伸至"D"列顶部 #

这个需求需要同时用colspan和**rowspan属性**配合处理：让左侧的"Parameter"和"Unit"单元格跨两行表头（因为表头分为主标题行和分类行），"Water Body Classification"通过colspan="5"横跨所有分类列，就能自然延伸到D列顶部。

修改后的完整代码 #

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col" rowspan="2">Parameter</th>
      <th scope="col" rowspan="2">Unit</th>
      <th scope="col" colspan="5" width="30px">Water Body Classification</th>
    </tr>
    <tr>
      <th class="text-center" scope="col">AA</th>
      <th class="text-center" scope="col">A</th>
      <th class="text-center" scope="col">B</th>
      <th class="text-center" scope="col">C</th>
      <th class="text-center" scope="col">D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>pH (Range)</td>
      <td>mg/L</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-8.5</td>
      <td class="text-center">6.5-9.0</td>
      <td class="text-center">6.5-9.0</td>
    </tr>
  </tbody>
</table>

属性说明 #

• rowspan="2"：让"Parameter"和"Unit"单元格垂直跨2行，覆盖主标题行和分类行，避免左侧出现空单元格。
• colspan="5"：让"Water Body Classification"单元格水平跨5列，正好覆盖下方AA到D的所有分类列，实现延伸到D列顶部的效果。

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