如何使表头有两行并且粘性？（不使用JavaScript）

Question

我的表格标题有两行，我想让它在滚动时固定。怎么做呢？我已经尝试将 th 元素的位置设置为 sticky，但第二行在滚动时会覆盖第一行（请参见代码片段）。

我看到很多基于 js 的解决方案，但我完全不感兴趣。当然可以只使用 CSS 解决问题！

我也不想使用需要硬编码表头行高度的解决方案。

.wrapper {
  height: 200px;
  width: 150px;
  background: red;
  overflow: auto;
}

table {
  width: 100%;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: blue;
  text-align: left;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
      <tr>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>e</td>
        <td>f</td>
      </tr>
      <tr>
        <td>g</td>
        <td>h</td>
      </tr>
      <tr>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>m</td>
        <td>n</td>
      </tr>
      <tr>
        <td>o</td>
        <td>p</td>
      </tr>
      <tr>
        <td>q</td>
        <td>r</td>
      </tr>
      <tr>
        <td>s</td>
        <td>t</td>
      </tr>
      <tr>
        <td>u</td>
        <td>v</td>
      </tr>
      <tr>
        <td>w</td>
        <td>x</td>
      </tr>
      <tr>
        <td>y</td>
        <td>z</td>
      </tr>
    </tbody>
  </table>
</div>

- user6429576

Answer 1

它们会变得粘在一起，但会重叠在彼此之上。 你需要指定第二行的 top 与第一行保持一定的间距。

.wrapper {
  height: 200px;
  width: 150px;
  background: red;
  overflow: auto;
}

table {
  width: 100%;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: blue;
  text-align: left;
}

thead>tr:nth-child(2) th {
  top: 20px;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
      <tr>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>e</td>
        <td>f</td>
      </tr>
      <tr>
        <td>g</td>
        <td>h</td>
      </tr>
      <tr>
        <td>i</td>
        <td>j</td>
      </tr>
      <tr>
        <td>k</td>
        <td>l</td>
      </tr>
      <tr>
        <td>m</td>
        <td>n</td>
      </tr>
      <tr>
        <td>o</td>
        <td>p</td>
      </tr>
      <tr>
        <td>q</td>
        <td>r</td>
      </tr>
      <tr>
        <td>s</td>
        <td>t</td>
      </tr>
      <tr>
        <td>u</td>
        <td>v</td>
      </tr>
      <tr>
        <td>w</td>
        <td>x</td>
      </tr>
      <tr>
        <td>y</td>
        <td>z</td>
      </tr>
    </tbody>
  </table>
</div>

- felixmosh