如何使具有 2 行粘性的表头？（没有js）答案

【问题标题】：How to make table header with 2 rows sticky?! (without js)如何使具有 2 行粘性的表头？（没有js）
【发布时间】：2020-09-04 12:31:30
【问题描述】：

我的表格标题中有两行，我希望它在滚动时固定。我怎样才能做到这一点？我尝试将th 元素的位置设置为sticky，但第二行与滚动时的第一行重叠（参见 sn-p）。

我已经看到很多基于 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>

【问题讨论】：

标签： html css html-table css-position sticky

【解决方案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>

【讨论】：