Les feuilles de style CSS, Seuls les en-Têtes de Tableau Dans google Chrome

J'ai le texte suivant Sass extrait dans lequel je veux le <thead> de flotter comme la table des parchemins. Cela fonctionne correctement dans Safari, mais pas dans Chrome Version 58.0.3029.110 (64-bit).

Je sais que Chrome a eu sur-encore une fois-off-nouveau support pour sticky, et prend actuellement en charge, mais est-il définitif? Est-ce un Chrome bug ou ai-je besoin d'une autre solution? (Je préfère le CSS plutôt que Javascript car il est plus performant.)

.table {
  thead {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
Basé sur la prise en charge du navigateur, j'aurais juste une utilisation fixe au lieu de collant. À ma connaissance, le soutien n'est pas à 100% encore.
Liées Chrome Bug: bugs.chromium.org/p/chromium/issues/detail?id=702927

OriginalL'auteur Donnie | 2017-05-16

  1. 43

    position: collant ne fonctionne pas avec certains éléments de la table (thead/tr) dans Chrome. Vous pouvez déplacer collante, tds/sat de tr vous devez être collant. Comme ceci:

    .table {
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

    Aussi cela fonctionne.

    .table {
    position: sticky;
    top: 0;
    z-index: 10;
}

    Vous pouvez déplacer l'en-tête de séparer la mise en page. Par exemple:

    <table class="table">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
</table>
<table>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
    la mise en page distincte option est viable que si les colonnes sont toutes de la même largeur
    Intéressant de noter que cela ne fonctionnera pas si la table est contenue à l'intérieur d'un élément avec overflow: auto ou overflow-x: auto. Cela se produit si vous avez une table dans le bootstrap est .table-responsive classe.
    Je suis d'accord avec Rick Viscomi sur la mise en page distincte option est viable que si les colonnes sont toutes de la même largeur et aussi que la solution n'est pas sans inconvénients si, après la table il y a un autre contenu parce que le collant table pour l'ensemble du contenu, même après la fin de la seconde table avec le contenu, de sorte qu'il est inutilisable dans la plupart des situations. Il est possible de voir un exemple sur la jfiddle à l'adresse suivante: jsfiddle.net/eg6s4097/1 avec tous les inconvénients mentionnés

    OriginalL'auteur Kirill Matrosov

  2. 21

    Pour quelqu'un qui est toujours à la recherche d'une solution et n'est pas satisfait de la a accepté.

    1) Utiliser le collant-dessus de la classe sur l'élément th.

    2) Avec la classe

    th.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  #To not have transparent background.
  #background-color: white;
}

<table class="table">
  <thead>
    <tr>
      <th class="sticky-header">1</th>
      <th class="sticky-header">2</th>
      <th class="sticky-header">3</th>
      <th class="sticky-header">4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

    OriginalL'auteur Tomsgu

  3. 3

    https://jsfiddle.net/y9cwnb81/4/

    div.table {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"header header header"
"content content content";
}
.header {
grid: 1fr/1fr;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-area: content;
height: 200px;
overflow-y: scroll;
}
.content div {
grid: auto-flow 1fr / repeat(auto-fill);
}
<!-- Here is the table code -->
<div class="table">
<div class="header">Name</div>
<div class="header">Color</div>
<div class="header">Description</div>
<div class="content">
<div>Apple</div>
<div>Red</div>
<div>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
<div>Apple</div>
<div>Red</div>
<div>These are red asd.</div>
</div>
</div>

    Voici un exemple d'utilisation de GRILLE CSS pour avoir collant les en-têtes uniquement avec du CSS, pas de javascript requis.

    C'est une grille avec une hauteur fixe et "overflow-y: scroll". Ce n'est pas à l'aide de la "position: collant" (de sorte que les en-têtes de ne pas "coller" à la haut de la fenêtre d'affichage). Néanmoins, c'est une réponse utile qui pourrait être adaptée à l'utilisation de la "position: collant". Merci!

    OriginalL'auteur Danilo Castro