带border-radius与sticky粘性表头的表格滚动圆角失效如何用CSS解决

下面分两个实现方向，你可以根据业务兼容要求选择：

方案1：滚动时保留表头圆角（兼容性最好） #

核心思路是用clip-path对thead区域进行裁剪，把圆角外漏的内容直接裁掉，不会影响sticky定位的正常生效，支持所有支持position: sticky的浏览器。
示例代码如下：

/* 你的表头元素，也可以根据实际结构换成th的父容器 */
thead {
  position: sticky;
  top: 0;
  /* 和你原本设置的圆角值保持一致 */
  border-radius: 12px;
  clip-path: inset(0 0 0 0 round 12px);
  /* 确保表头层级高于tbody内容 */
  z-index: 10;
}
/* 表头单元格必须设置不透明背景，否则还是会透出下方内容 */
th {
  background-color: #ffffff;
}

方案2：表头进入粘性状态时自动取消圆角 #

核心思路是匹配sticky元素的吸附状态，动态去掉圆角，适合可以接受新CSS特性的场景。

高版本浏览器原生实现（Chrome 115+、Firefox 133+、Safari 17.4+） #

直接用浏览器原生的:state(stuck)伪类匹配粘性吸附状态：

thead {
  position: sticky;
  top: 0;
  border-radius: 12px;
  z-index: 10;
}
/* 表头吸附时取消圆角 */
thead:state(stuck) {
  border-radius: 0;
}

低版本兼容实现 #

如果需要兼容不支持:state(stuck)的浏览器，可以用滚动驱动动画模拟状态判断：

@supports not (selector(:state(stuck))) {
  /* 定义滚动时间线，页面滚动1px时触发动画 */
  @scroll-timeline table-scroll {
    source: auto;
    start: 1px top;
    end: 1px top;
  }
  thead {
    animation: unset-radius 1ms linear both;
    animation-timeline: table-scroll;
  }
  @keyframes unset-radius {
    to {
      border-radius: 0;
    }
  }
}

内容的提问来源于stack exchange，提问作者Muhammad Rehan Saeed