css - event - position sticky example

¿Por qué el borde no es visible con "posición: pegajoso" cuando existe un color de fondo?

Question

position: ''sticky'' aterrizó en Chrome 56 , pero hace que el borde sea invisible en ciertas circunstancias.

Considere el siguiente ejemplo:

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>

En Chrome 56.0.2924.76, solo se ve el borde del último <th> , y esto solo ocurre cuando <th> tiene un background-color especificado.

¿Es esto un error en Chrome?

Playground

Answer 1

El siguiente ejemplo actualmente funciona bien en Chrome (65) y Firefox (59).

El código SCSS ilustra mejor la relación entre los valores. Puede establecer los valores deseados cambiando las variables.

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 y CSS compilado:

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 2

Estoy utilizando solo bordes horizontales en mi página, por lo que es posible que deba adaptarse a su caso particular. Al usar un color de fondo semitransparente para las celdas de la tabla, descubrí que es el extremo inferior del fondo el que se superpone al borde horizontal. Supongo que será lo mismo con el extremo derecho para el borde vertical. Para evitar que el borde se superponga, he establecido un degradado lineal que llena todo menos el último píxel. Desafortunadamente, esto solo funciona en Firefox y Chrome pero no en 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 sí pinta un degradado lineal pero desde el blanco en la parte superior hasta el transparente en la parte inferior, ignorando el cambio en la parada al 100% - 1px.

Answer 3

He resuelto con sombra

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

Me enfrenté al mismo problema. Mi solución fue usar el :after pseudo elemento para emular un borde inferior.

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

Answer 5

Parece que forzar un reflujo ayudará parcialmente:

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 también parece eficiente e inofensivo:

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 6

Si la tabla contiene un borde alrededor de las columnas y agregamos una posición fija, cuando se desplaza la tabla, se muestra el efecto de superposición para eliminar este efecto y retiene el borde.

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

Answer 7

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

Solucioné este mismo problema con un pseudo elemento en lugar de un borde. Sin embargo, no estoy seguro de por qué sucede esto en primer lugar.