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

Question

我有一个<table>带有 aborder-radius和粘性标头的 HTML，使用position: sticky如下所示：

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

但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角：

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

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;
}

Answer 2

正如Ivan 所建议的那样，使用伪元素来覆盖标题下方不需要的边框似乎是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码：

\n

\r\n

\r\n

/* \n\xc2\xa7 Additions / Changes\n*/\ntable thead th {\n  position: relative;\n}\n\n/* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */\n\ntable thead th:last-child::after,\ntable thead th:first-child::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc(-1 * var(--global-border-width-1));\n  width: var(--global-border-radius);\n  background-image:\n    linear-gradient(to bottom, \n      transparent var(--global-border-radius),\n      var(--global-title-color) 0),\n    radial-gradient(circle at var(--global-border-radius) var(--global-border-radius),\n      var(--global-title-color) var(--global-border-radius),\n      var(--global-content-background-color) 0);\n  background-position: top left;\n  background-size:\n    var(--global-border-diameter) 100%,\n    var(--global-border-diameter) var(--global-border-diameter);\n  background-repeat: no-repeat;\n}\n\ntable thead th:last-child::after {\n  left: auto;\n  right: calc(-1 * var(--global-border-width-1));\n  background-position: top right;\n}\n\n/*\n\xc2\xa7 Declarations and original style\n*/\n\nhtml {\n  --global-content-background-color: white;\n  --global-title-color: black;\n  --global-background-color: lightblue;\n  --global-border-color: black;\n  --global-border-radius: 20px;\n  --global-border-width-1: 10px;\n  --global-space-fixed-2: 10px;\n  --global-space-fixed-3: 15px;\n  --global-border-diameter: calc(2 * var(--global-border-radius));\n  background-color: var(--global-content-background-color);\n}\n\ntable {\n  color: var(--global-title-color);\n  background-color: var(--global-content-background-color);\n  border-collapse: separate;\n  border-color: var(--global-title-color);\n  border-style: solid;\n  border-radius: var(--global-border-radius);\n  border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1);\n  border-spacing: 0;\n  width: 100%;\n}\n\ntable thead {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\ntable thead th {\n  color: var(--global-background-color);\n  background-color: var(--global-title-color);\n  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);\n  vertical-align: bottom;\n}\n\ntable tbody td {\n  border-top: var(--global-border-width-1) solid var(--global-border-color);\n  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);\n  vertical-align: top;\n}\n\ntable tbody tr:last-child td:first-child {\n  border-bottom-left-radius: var(--global-border-radius);\n}\n\ntable tbody tr:last-child td:last-child {\n  border-bottom-right-radius: var(--global-border-radius);\n}\n\n/*\n\xc2\xa7 Unrelated / demo\n*/\n\n* {\n  scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem);\n  /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */\n  scroll-margin-bottom: 1em;\n}\n\ntd {\n  height: 60vh;\n}\n\ntd a {\n  float: right\n}\n\ntr:last-child td {\n  vertical-align: bottom;\n}\n\na[name]:empty::before {\n  content: attr(name);\n}\n\nth:not(#\\0):hover::before {\n  background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0);\n  background-position: top left;\n  background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter);\n}

\r\n

<table>\n  <thead>\n    <tr>\n      <th>Fake non-transparent "border-radius"</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <a href="#\xe2\xac\x86\xef\xb8\x8f" name="\xe2\xac\x87\xef\xb8\x8f"></a> For fixed header</td>\n    </tr>\n    <tr>\n      <td>\n        <a href="#\xe2\xac\x87\xef\xb8\x8f" name="\xe2\xac\x86\xef\xb8\x8f"></a> Using CSS stacked background images in pseudo elements</td>\n    </tr>\n  </tbody>\n</table>

\r\n

\r\n

\r\n

\n