HTML Table 边框半径和粘性 Header

Question

我有一个带有 border-radius 的 HTML <table> 和一个使用 position: sticky 的粘性 header，看起来像这样：

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

但是，当使用粘性 header 滚动时，table 行会突出到粘性 header 的圆角所在的位置。请参阅此图片的左上角：

有没有一种方法可以在使用粘性 header 向下滚动时保持圆角，或者当 header 变得粘性并从其原始位置向下移动时移除粘性 header位置？理想情况下，我只想要 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

不确定你是否熟悉jquery，如果是那么你可以动态更改border-top-left-radius：等于粘性的半径header 每当你滚动内容时，但对于新手来说 jquery/JS.

有点棘手

其次，您可以将粘性 header 附在 parent 中（例如 class="parent")，并将 parent 背景设置为无边框的白色。并保留sticky header 的边框半径是圆形的。因此，当您滚动内容时，它将低于 parent（比如 class="parent"）。要确保 parent 出现在行上方，你可以给 z-index: 10

Answer 3

只需删除 table 的边框并为 table 正文中的第一个和最后一个 table 单元格左右添加边框：

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

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

就使用许多伪选择器而言，样式看起来很丑陋，但似乎可以解决您的问题。

Answer 4

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

/* 
§ 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(#[=10=]):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>

HTML Table 边框半径和粘性 Header

HTML Table with Border Radius & Sticky Header

html

css

html-table

css-position

sticky