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

Question

position: 'sticky'降落在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中的错误吗？

操场

Answer 1

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

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

Answer 2

如果表包含列周围的边框,我们添加粘贴位置,当我们滚动表显示重叠效果以删除此效果并保留边框时,我们需要删除边框并添加轮廓而不是边框

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

Answer 3

似乎强制回流会部分帮助:

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 4

我已经解决了阴影

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 5

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

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 {

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

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