为什么背景色存在时 "position: sticky" 的边框不可见？

Question

position: 'sticky' landed in Chrome 56，但在某些情况下它会使边框不可见。

考虑以下示例：

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  background-color: #fff;
  border-right: 5px solid red;
}

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
</table>

在 Chrome 56.0.2924.76 中，只有最后一个 <th> 的边框是可见的，并且只有当 <th> 指定了 background-color 时才可见。

这是 Chrome 中的错误吗？

Playground

Answer 1

似乎强制回流会有部分帮助：

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  transform:scale(0.999);
}

  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

background-clip 似乎也是高效无害的：

table {
  margin-top: 1em;
  border-collapse: collapse;
  margin-bottom: 200vh
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  background:white; 
  background-clip: padding-box;
}

  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

Answer 2

我遇到了同样的问题。我的解决方法是使用 :after 伪元素来模拟底部边框。

th:after{
  content:'';
  position:absolute;
  left: 0;
  bottom: 0;
  width:100%;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

Answer 3

我用影子解决了

table tr th {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  z-index: 2;
  background-color: white;
  -moz-box-shadow: 0 0 1px -1px #ccc;
  -webkit-box-shadow: 0 0 1px -1px #ccc;
  box-shadow: 0 0 1px -1px #ccc;
}

Answer 4

下一个示例目前在 Chrome (65) 和 Firefox (59) 下运行良好。

SCSS 代码更好地说明了值之间的关系。您可以通过更改变量来设置所需的值。

SCSS:

table {

    &.sticky-table-head {

        // Variables

        $border-width: 2px;

        $head-background-color: #ded;
        $head-border-color: #8a8;

        $background-color: #f8fff8;
        $border-color: #cdc;

        $color: #686;

        // Declarations

        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: $background-color;
        color: $color;

        &:last-child {
            margin-bottom: 100vh;
        }

        th,
        td {
            border: $border-width solid $border-color;
        }

        thead {

            th {
                position: sticky;
                top: ($border-width / 2);
                background-color: $head-background-color;
                outline: $border-width solid $head-border-color;
                outline-offset: (- $border-width / 2);
            }
        }
    }
}

HTML 并编译 CSS:

table.sticky-table-head {
 margin-bottom: 1em;
 border-collapse: collapse;
 background-color: #f8fff8;
 color: #686;
}

table.sticky-table-head:last-child {
 margin-bottom: 100vh;
}

table.sticky-table-head th,
table.sticky-table-head td {
 border: 2px solid #cdc;
}

table.sticky-table-head thead th {
 position: -webkit-sticky;
 position: sticky;
 top: 1px;
 background-color: #ded;
 outline: 2px solid #8a8;
 outline-offset: -1px;
}

<div>
 <!-- First table -->
 <table class="sticky-table-head">
  <thead>
   <tr>
    <th>Lorem</th>
    <th>Ipsum</th>
    <th>Dolor sit amet</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
  </tbody>
 </table>
 <!-- Second table -->
 <table class="sticky-table-head">
  <thead>
   <tr>
    <th>Lorem</th>
    <th>Ipsum</th>
    <th>Dolor sit amet</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
   <tr>
    <td>ipsum</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    <td>sit</td>
   </tr>
  </tbody>
 </table>
</div>

Answer 5

如果 table 包含列周围的边框并且我们添加粘性位置，当我们滚动 table show overlapping effect 以移除此效果时保留边框我们需要删除边框并添加轮廓而不是边框

table tr th{
  outline: 1px solid #e9ecef;
  border:none;
  outline-offset: -1px;
}

Answer 6

thead::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #333333;
}

我用伪元素而不是边框解决了同样的问题。不过，一开始并不确定为什么会发生这种情况。

Answer 7

我在我的页面中只使用了水平边框，所以这可能需要根据您的具体情况进行调整。通过为 table 单元格使用半透明背景颜色，我发现它是覆盖水平边框的背景底端。我猜它与垂直边框的右端相同。为了避免边界重叠，我设置了一个线性渐变，填充所有内容但保留最后一个像素。不幸的是，这仅适用于 Firefox 和 Chrome，但不适用于 Edge。

td:first-child {
  position: sticky;
  left: 0px;
  z-index: 2;
  background: linear-gradient(to bottom, white, white calc(100% - 1px),
                              transparent calc(100% - 1px), transparent);
}

Edge 确实绘制了线性渐变，但从顶部的白色到底部的透明，忽略了在 100% - 1px 停止时的硬变化。

Answer 8

另一种选择是将您的内容包装在一个元素中并在其上放置边框：

.th-inner {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

<th>
  <div class="th-inner">your content</div>
</th>

但是我发现在 th 上放置边框而不在 table 上放置 border-collapse: collapse 也能奏效，所以我就这样做了。

Answer 9

试试这个：

background-clip: padding-box;

Answer 10

html {
  padding: 0px;
  margin: 0px;
}

body {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

th,
td {
  padding: 10px;
  border: 0.1px solid #e8e0e0;
  padding-right: 10px;
}

th {
  text-align: center;
  background: #f3f3f3;
  background-clip: padding-box;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th:first-child {
  text-align: center;
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  left: 0;
}

tbody th,
thead th:first-child {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  word-break: break-all;
}

.fixed_header {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}


/* fixed header */

thead th {
  /* for Safari */
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.fixed_header th,
.fixed_header td {
  padding: 10px;
  width: 90px;
}

.table_container {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: auto;
  background: cornsilk;
}

<table class="fixed_header">
  <thead>
    <tr>
      <th></th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>jhhhh-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>

  </tbody>
</table>
</div>

Answer 11

使用::after伪选择器模拟右边框

示例：

th::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #e7e7e7;
}

Answer 12

box-shadow: inset 0 0 0px 2px #555; 而不是 border: solid 2px #555; 将起作用。但这确实是一个错误，应该由浏览器修复。

为什么背景色存在时 "position: sticky" 的边框不可见？

Why border is not visible with "position: sticky" when background-color exists?

css

google-chrome

sticky