html - 如何使具有 2 行粘性的表头？! (没有js)

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>

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>