如何使 table header 有 2 行粘性？！（没有js）

Question

我的 table header 中有两行，我希望它固定在滚动条上。我怎样才能做到这一点？我试过将 th 元素的位置设置为 sticky，但第二行与滚动时的第一行重叠（参见代码片段）。

我看过很多基于 js 的解决方案，但我对它们根本不感兴趣。当然可以只使用 CSS!

我也不想使用必须硬编码 header 行高度的解决方案。

.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 指定为第一行的 space。

.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>

如何使 table header 有 2 行粘性？！（没有js）

How to make table header with 2 rows sticky?! (without js)

html

css

html-table

css-position

sticky

如何使 table header 有 2 行粘性？！ （没有js）

How to make table header with 2 rows sticky?! (without js)

html

css

html-table

css-position

sticky

如何使 table header 有 2 行粘性？！（没有js）