Почему граница не видна с "position: sticky", когда существует цвет фона?

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?

площадка

14
css google-chrome sticky

6 ответов

кажется, что заставить reflow частично поможет:

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

я столкнулся с той же проблемой. Моим обходным путем было использование :after псевдоэлемент для эмуляции нижней границы.

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

если таблица содержит границу вокруг столбцов, и мы добавляем липкую позицию, при прокрутке таблицы показать эффект перекрытия, чтобы удалить этот эффект и сохраняет границу нам нужно удалить границу и добавить контур вместо границы 

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

Я решил с тенью

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;
}
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>
0
thead::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #333333;
}

я исправил эту же проблему с псевдо-элементом вместо границы. Не уверен, почему это происходит, в первую очередь, хотя.

0