当背景颜色存在时，为什么边框不可见“position：sticky”？

时间：2017-01-26 20:41:34

标签： css google-chrome sticky

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

12 个答案:

答案 0 :(得分：42)

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

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

答案 1 :(得分：12)

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

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

答案 2 :(得分：9)

似乎强迫回流会部分帮助：

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>

答案 3 :(得分：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;
}

答案 4 :(得分：2)

下一个示例目前在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>

答案 5 :(得分：1)

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

示例：

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

答案 6 :(得分：0)

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

我用伪元素而不是边框​​修复了同样的问题。但不知道为什么会发生这种情况。

答案 7 :(得分：0)

我在页面中仅使用水平边框，因此可能需要针对您的特定情况进行调整。通过为表格单元格使用半透明的背景色，我发现它是背景的底端与水平边框重叠。我想垂直边框的右端也一样。为了避免边框重叠，我设置了一个线性渐变，该渐变会填充所有内容，但会保留最后一个像素。不幸的是，这仅适用于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处的硬变化。

答案 8 :(得分：0)

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

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

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

但是，我发现将边框放在th上而不需要在桌子上放置border-collapse: collapse，所以我去了。

答案 9 :(得分：0)

尝试以下方法：

background-clip: padding-box;

答案 10 :(得分：0)

尝试输入我的代码： 

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>

答案 11 :(得分：0)

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

相关问题
最新问题