前端 - 如何实现这样的多级表头？

Question

只需要用原生的html实现即可，

红框中的内容是动态展示的，而且每次也只会有一条数据

Answer 1

以下是一个三级表头的实现示例：

<table border="1" cellspacing="0">
  <thead>
    <tr>
      <th rowspan="2">第一列</th>
      <th colspan="2">第二列</th>
    </tr>
    <tr>
      <th>第二列子列1</th>
      <th>第二列子列2</th>
    </tr>
    <tr>
      <th></th>
      <th>第二列子列1子列1</th>
      <th>第二列子列2子列1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一列行1</td>
      <td>第二列子列1行1</td>
      <td>第二列子列2子列1行1</td>
    </tr>
    <tr>
      <td>第一列行2</td>
      <td>第二列子列1行2</td>
      <td>第二列子列2子列1行2</td>
    </tr>
  </tbody>
</table>

在上面的示例代码中，使用 rowspan 和 colspan 属性实现了多级表头。其中，行合并使用 rowspan 属性，列合并使用 colspan 属性。需要注意的是，合并单元格的时候需要保证每个单元格只被包含在一个合并后的单元格内。

在以上的示例中，第二列有两个子列，分别是第二列子列1和第二列子列2。第二列子列1又有一个子列，是第二列子列1子列1。因此，第三行中的第一列为空，第二列是第二列子列1子列1，第三列是第二列子列2子列1。

最后再说明一下，多级表头的实现方式并不唯一，可以根据实际需求进行灵活变化。

Answer 2

解决了，方法的话就是放弃thead，将所有的内容用tbody展示，具体如下：

<table class="table2">
    <tbody>
        <tr>
            <td rowspan="4">张三</td>
            <th>总分</th>
            <th colspan="6">背景分</th>
            <th colspan="4">评价分</th>
            <th colspan="4">辅导频次分</th>
            <th rowspan="3">信誉分</th>
        </tr>
    <tr>
        <td rowspan="3">69+30</td>
        <td colspan="6">60</td>
        <td colspan="4">88</td>
        <td colspan="4">89</td>
    </tr>
    <tr>
        <th>行政区</th>
        <th>学校</th>
        <th>学科</th>
        <th>教龄</th>
        <th>职称</th>
        <th>称号</th>
        <th>一对一评价分</th>
        <th>互动课评价分</th>
        <th>问答评价分</th>
        <th>微课评价分</th>
        <th>一对一辅导次数</th>
        <th>互动课开课次数</th>
        <th>问答回答次数</th>
        <th>微课发布个数</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>