如何防止带rowspan的粘性表头在滚动时塌陷？

问题核心在于所有表头单元格统一设置position: sticky; top: 0，导致第二行表头被第一行表头覆盖，再结合表格跨行布局的特性，最终出现非rowspan列滚动塌陷的情况。

修复方案 #

1. 给两行表头设置不同的top值，让第二行表头粘在第一行表头的下方
2. 调整表头层级，避免被下方内容遮挡
3. 合并表格边框，优化滚动时的视觉效果

修改后的代码 #

CSS

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

.table-container {
  max-height: 100px;
  display: inline-block;
  overflow: auto;
}

/* 第一行表头：粘在容器顶部 */
thead tr:first-child th {
  position: sticky;
  top: 0;
  background: #FFF;
  z-index: 2;
}

/* 第二行表头：粘在第一行表头下方，top值对应第一行的行高 */
thead tr:last-child th {
  position: sticky;
  top: 24px;
  background: #FFF;
  z-index: 1;
}

HTML

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th scope="col" rowspan="2">Col1</th>
        <th scope="col" rowspan="2">Col2</th>
        <th scope="col">Col3</th>
      </tr>
      <tr>
        <th scope="col">Col3 Sub-title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$50</td>
      </tr>
    </tbody>
  </table>
</div>

兼容性优化提示 #

如果第一行表头行高不固定，可以用CSS变量动态绑定高度：

thead tr:first-child th {
  --header-height: 24px; /* 可根据内容自动调整或设为auto */
  position: sticky;
  top: 0;
  background: #FFF;
  z-index: 2;
}

thead tr:last-child th {
  position: sticky;
  top: var(--header-height);
  background: #FFF;
  z-index: 1;
}

内容的提问来源于stack exchange，提问作者pileup