web-dev-qa-db-fra.com

Pourquoi la bordure n'est pas visible avec "position: collante" quand la couleur de fond existe?

position: 'sticky' A atterri dans Chrome 56 , mais cela rend la bordure invisible dans certaines circonstances.

Prenons l'exemple suivant:

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>

Dans Chrome 56.0.2924.76, seule la dernière bordure de <th> Est visible, et ce uniquement lorsque <th> A un background-color Spécifié .

Est-ce un bug dans Chrome?

Aire de jeux

cssgoogle-chromesticky
31
Misha Moroshko

semble forcer une refusion aidera partiellement:

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 semble également efficace et inoffensif:

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>
11
G-Cyr

J'ai fait face au même problème. Ma solution de contournement consistait à utiliser le :after pseudo-élément pour émuler une bordure inférieure.

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

si le tableau contient une bordure autour des colonnes et que nous ajoutons une position collante, lorsque nous faisons défiler le tableau, nous montrons l'effet de chevauchement pour supprimer cet effet et conserve la bordure, nous devons supprimer la bordure et ajouter un contour au lieu de la bordure

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

J'ai résolu avec l'ombre

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;
}
6
Project Mayhem

L'exemple suivant fonctionne actuellement bien sous Chrome (65) et Firefox (59).

Le code SCSS illustre mieux la relation entre les valeurs. Vous pouvez définir les valeurs souhaitées en modifiant les 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 et CSS compilé:

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>
2
Haász Sándor

Une autre option consiste à encapsuler votre contenu dans un élément et à mettre la frontière dessus:

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

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

Cependant J'ai trouvé que mettre la bordure sur le th fonctionnait sans border-collapse: collapse sur la table, donc je suis allé pour ça.

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

J'ai corrigé ce même problème avec un pseudo-élément au lieu d'une bordure. Je ne sais pas pourquoi cela se produit en premier lieu, cependant.

0
Alejandro

J'utilise uniquement des bordures horizontales dans ma page, cela peut donc devoir être adapté à votre cas particulier. En utilisant une couleur d'arrière-plan semi-transparente pour les cellules du tableau, j'ai découvert que c'est l'extrémité inférieure de l'arrière-plan qui recouvre la bordure horizontale. Je suppose que ce sera la même chose avec l'extrémité droite pour la bordure verticale. Pour éviter le chevauchement des bordures, j'ai défini un dégradé linéaire qui remplit tout mais épargne le dernier pixel. Malheureusement, cela ne fonctionne que dans Firefox et Chrome mais pas dans 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);
}

Le bord peint un dégradé linéaire mais du blanc en haut au transparent en bas, ignorant le changement dur à l'arrêt à 100% - 1px.

0
ygoe