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

【问题标题】：HTML Table with Border Radius & Sticky Header带有边框半径和粘性标题的 HTML 表格
【发布时间】：2021-09-08 03:33:06
【问题描述】：

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

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

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

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

【问题讨论】：

刚刚试过你的笔 - 你可以计算元素的当前位置，一旦行进入粘性标题，你就会对它们应用相同的半径，反之亦然 - 有点黑客但为什么不;) （或显示：无，因此它们隐藏在粘性角落后面）
另一种选择是查看question的答案
如果您需要其他方向，这是一个相关问题：stackoverflow.com/q/62129021/8620333

标签： html css html-table css-position sticky

【解决方案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;
}

【讨论】：

【解决方案2】：

不确定您是否熟悉 jquery，如果熟悉，那么您可以在滚动内容时动态更改 border-top-left-radius: 等于 Sticky header 的半径，但它是对于 jquery/JS 的新手来说有点棘手。

其次，您可以将您的粘性标题附在父级上（比如class="parent")，并将父级背景设置为没有边框的白色。并保持粘性标题的边框半径保持原样。因此，当您滚动内容将在该父级下方（例如class="parent"）。要确保父级出现在行上方，您可以提供z-index: 10

【讨论】：

【解决方案3】：

只需从表格中移除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框：

tbody td:first-child {
  border-left: 1px solid black;
}
tbody td:last-child {
  border-right: 1px solid black;
}
tbody tr:last-child td{
  border-bottom: 1px solid black;
}
tbody tr:last-child td:first-child {
  border-bottom-left-radius: 2px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 2px;
}

当然还有适当的缩进、嵌套和你的变量！

在使用许多伪选择器方面看起来很丑陋，但似乎可以解决您的问题。

【讨论】：

【解决方案4】：

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

/* 
§ Additions / Changes
*/
table thead th {
  position: relative;
}

/* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */

table thead th:last-child::after,
table thead th:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--global-border-width-1));
  width: var(--global-border-radius);
  background-image:
    linear-gradient(to bottom, 
      transparent var(--global-border-radius),
      var(--global-title-color) 0),
    radial-gradient(circle at var(--global-border-radius) var(--global-border-radius),
      var(--global-title-color) var(--global-border-radius),
      var(--global-content-background-color) 0);
  background-position: top left;
  background-size:
    var(--global-border-diameter) 100%,
    var(--global-border-diameter) var(--global-border-diameter);
  background-repeat: no-repeat;
}

table thead th:last-child::after {
  left: auto;
  right: calc(-1 * var(--global-border-width-1));
  background-position: top right;
}

/*
§ Declarations and original style
*/

html {
  --global-content-background-color: white;
  --global-title-color: black;
  --global-background-color: lightblue;
  --global-border-color: black;
  --global-border-radius: 20px;
  --global-border-width-1: 10px;
  --global-space-fixed-2: 10px;
  --global-space-fixed-3: 15px;
  --global-border-diameter: calc(2 * var(--global-border-radius));
  background-color: var(--global-content-background-color);
}

table {
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1);
  border-spacing: 0;
  width: 100%;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

table thead th {
  color: var(--global-background-color);
  background-color: var(--global-title-color);
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: bottom;
}

table tbody td {
  border-top: var(--global-border-width-1) solid var(--global-border-color);
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: top;
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--global-border-radius);
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--global-border-radius);
}

/*
§ Unrelated / demo
*/

* {
  scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem);
  /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */
  scroll-margin-bottom: 1em;
}

td {
  height: 60vh;
}

td a {
  float: right
}

tr:last-child td {
  vertical-align: bottom;
}

a[name]:empty::before {
  content: attr(name);
}

th:not(#\0):hover::before {
  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);
  background-position: top left;
  background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter);
}

<table>
  <thead>
    <tr>
      <th>Fake non-transparent "border-radius"</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#⬆️" name="⬇️"></a> For fixed header</td>
    </tr>
    <tr>
      <td>
        <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td>
    </tr>
  </tbody>
</table>

【讨论】：