我有一个 HTML <table>
与 border-radius
和使用 position: sticky
的粘性标题看起来像这样:
https://codepen.io/muhammadrehansaeed/pen/OJpeeKP
但是,当使用粘性标题滚动时,表格行会在粘性标题的圆 Angular 所在的位置突出。见这张图片的左上角:
有没有一种方法可以在使用粘性标题向下滚动时保持圆 Angular ,或者当标题变得粘性并从其原始位置向下移动时移除粘性标题?理想情况下,我想要一个 CSS only 解决方案。
最佳答案
您可以使用伪元素隐藏部分边框:
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;
}
关于带有边框半径和粘性标题的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68119133/