如何让带圆角边框的表格粘性表头完全不透明，避免滚动时其他单元格边框透出

滚动时看到下方单元格边框从表头透出，本质是两个样式问题叠加：

• sticky表头默认z-index为auto，没有独立的层叠优先级，和普通文档流里的tbody单元格渲染在同一层级，DOM顺序靠后的tbody元素会和表头产生层叠竞争
• 带border-radius的表头，背景会被圆角规则裁切，单元格的角落位置是透明的，没有形成连续的不透明遮挡面，下方滚动的单元格边框会从这些透明空隙露出来

按顺序调整以下样式即可实现表头的完全不透明遮挡效果：

• 优先给sticky定位的表头单元格设置显式z-index，强制将其渲染在所有普通表格单元格的上层，拉开层叠差距。z-index的数值不需要过大，只要比同层普通单元格的默认层级高1-2级即可，避免创建多余的层叠上下文影响滚动性能。在原有规则中补充配置：

  thead>tr>th {
    top: 0;
    position: sticky;
    z-index: 2; /* 新增层叠优先级配置 */
  }
  

• 补全表头因圆角裁切产生的透明漏底区域。因为border-radius会把表头背景裁成圆角形状，边缘角落没有不透明色块，即便层叠顺序正确，下方的单元格边框依然会从透明位置穿出。可以根据视觉需求选两种方式处理：
  • 如果不需要强调圆角视觉，直接给表头设置和背景色一致的实心边框，让色块完全填满盒模型范围，消除透明空隙
  • 如果需要保留原有圆角外观，可以给表头加一层和背景色完全相同的实心投影做遮挡，不占布局空间、不改变视觉效果：

    th {
      background-color: #00aeef;
      border-radius: 5px;
      /* 新增同色投影，覆盖和下方滚动内容重叠的区域，投影偏移数值可根据实际单元格边框宽度调整，确保完全覆盖滚动过来的边框即可 */
      box-shadow: 0 6px 0 0 #00aeef;
    }
    

• 额外校验：确认表头背景使用完全不透明的实色值，不要使用带透明通道的半透明色，否则会自然透出下方内容，无法达到完全遮挡的效果。

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