Comment créer des en-têtes de tableau collants avec « position : sticky ; » ?

En-têtes de tableau collants avec position : collante

La position : collante ; La propriété a récemment été implémentée dans Webkit, offrant un moyen pratique de créer des éléments qui restent fixes dans leur conteneur parent pendant le défilement de la page. Alors que cette fonctionnalité ne fonctionnait initialement qu'au sein de l'élément parent direct, elle prend désormais en charge le défilement dans un tableau.

Question :

Comment puis-je utiliser la position : collant ; propriété pour corriger l'en-tête du tableau lors du défilement dans un conteneur div ?

Réponse :

Position collante sur la tête qui fonctionne sans effort en 2018 ! Ajoutez simplement la règle CSS suivante :

<code class="css">thead th { position: sticky; top: 0; }</code>

Pour utiliser des en-têtes collants, votre tableau doit inclure un en-tête et des éléments.

<code class="html"><table >
    <thead >
        <tr >
            <th >column 1</th>
            <th >column 2</th>
            <th >column 3</th>
            <th >column 4</th>            
        </tr>    
    </thead>
    <tbody >
      // your body code
    </tbody>
</table ></code>

Si votre en-tête contient plusieurs lignes, vous pouvez spécifier le comportement collant pour la première ligne :

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

Depuis mars 2018, les en-têtes collants sont pris en charge dans la plupart des navigateurs modernes. Reportez-vous à https://caniuse.com/#feat=css-sticky pour obtenir les dernières informations sur la compatibilité des navigateurs.

Le mérite de cette solution revient à @ctf0, qui l'a partagée dans un commentaire le 3 décembre 2017.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!