带有边框半径和粘性标题的 HTML 表格

Question

我有一个 HTML <table>与 border-radius和使用 position: sticky 的粘性标题看起来像这样:

https://codepen.io/muhammadrehansaeed/pen/OJpeeKP

但是，当使用粘性标题滚动时，表格行会在粘性标题的圆 Angular 所在的位置突出。见这张图片的左上角:

有没有一种方法可以在使用粘性标题向下滚动时保持圆 Angular ，或者当标题变得粘性并从其原始位置向下移动时移除粘性标题？理想情况下，我想要一个 CSS only 解决方案。

Answer 1

您可以使用伪元素隐藏部分边框:

table thead th:first-child::before, 
table thead th:last-child::after {
    width: 1px;
    height: 5px;
    background: white;
    content: "";
    display: block;
    position: absolute;
    top: 0px;
}
table thead th:first-child::before {
    left: -1px;
}
table thead th:last-child::after {
    right: -1px;
}