Chrome中HTML粘性表头被列内容覆盖的修复问题

针对你遇到的Chrome浏览器里sticky表头被表格内容顶部覆盖的问题，可通过以下方案解决：

• 将sticky定位从<thead>移至<th>元素：Chrome在处理表格border-collapse: collapse（Bootstrap table类默认启用该属性）时，thead和tbody的单元格会处于同一层叠上下文，导致z-index设置失效。直接给每个表头单元格设置sticky定位，能创建独立的层叠上下文，避免内容穿透。
• 确保表头单元格背景不透明：保留background-color: white，彻底遮挡下方内容。
• 可选：调整表格边框属性：如果需要保留border-collapse: collapse，可以给表头单元格添加顶部/底部边框，增强视觉隔离，同时避免内容溢出到表头区域。

修改后的代码示例：

<div style="max-height: 700px; overflow-y: auto;">
  <table class="table table-sm table-striped table-hover">
    <caption hidden></caption>
    <thead>
      <tr class="table-header">
        <th style="width: 5%; position: sticky; top: 0; background-color: white; z-index: 100;"></th>
        <th style="width: 10%; text-align: center; vertical-align: middle; position: sticky; top: 0; background-color: white; z-index: 100;">
          STUFF 1
        </th>
        <th style="width: 10%; text-align: center; vertical-align: middle; position: sticky; top: 0; background-color: white; z-index: 100;">
          STUFF 2
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of items">
        <td>
          <input type="checkbox">
        </td>
        <td style="text-align: center; vertical-align: middle">text</td>
        <td style="text-align: center; vertical-align: middle">text</td>
      </tr>
    </tbody>
  </table>
</div>

如果希望简化样式，也可以通过CSS类统一设置：

.table-sticky-header th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

然后给<thead>添加该类即可：

<thead class="table-sticky-header">

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