html - thead 中有多行的粘性标题表

Question

所以我能够创建一个粘性标题表并且它工作正常。问题是我需要制作另一个带有多行标题的表格，而我目前使用的方法不起作用，正如您在下面的代码中看到的那样。

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2">
          Header
        </th>
        <th colspan="2">Colspan column</th>
      </tr>
      <tr>
        <th>
          A
        </th>
        <th>
          B
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>

是否可以仅使用 CSS 实现我想要的效果？

这是笔 https://codepen.io/criscoder/pen/KJNGqj

Answer 1

就快完成了，您可以简单地在 <th> 中嵌入一个表格并以这种方式添加额外的行。

.table-wrapper {
  position: relative;
  overflow-y: auto;
  height: 200px;
  width: 200px;
}

table {
  border: 1px solid #DDD;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0
}

table tr th,
table tr td{
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 4px;
}

table thead tr th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th rowspan="2" colspan="1">
          Header
        </th>
        <th rowspan="2" colspan="2">
        <table>
        <tr>
          <td colspan="2">Colspan column</td>
        </tr>
        <tr>
          <td colspan="1">A</td>
          <td colspan="1">B</td>
        </tr>
        </table>
        </th>
      </tr>
      
    </thead>
    <tbody>
      <tr>
        <td>Line 1</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 2</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 3</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 4</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 5</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 6</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 7</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 8</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 9</td>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>Line 10</td>
        <td>a</td>
        <td>b</td>
      </tr>
    </tbody>
  </table>
</div>