Pouvez-vous rendre un en-tête de tableau collant dans un div défilant en utilisant \'position: sticky\' ?

En-têtes collants dans les divisions de table défilante

Avec l'introduction récente de « position : collante » dans Webkit, les développeurs explorent ses utilisations potentielles. Une question qui se pose est de savoir s'il peut être utilisé pour conserver l'en-tête (thead) d'un tableau au sein d'un div défilant.

Concept

Par défaut, 'position : sticky' limite sa fonctionnalité à l'élément parent, le rendant inadapté à ce scénario spécifique. Cependant, il est possible d'exploiter le « positionnement collant » pour obtenir l'effet souhaité.

Solution

Pour rendre l'en-tête du tableau collant dans le div défilant, vous pouvez ajoutez la ligne suivante dans votre feuille de style :

thead th { position: sticky; top: 0; }

Assurez-vous que votre table contient les éléments 'thead' et 'th' nécessaires pour appliquer le style.

Mise en œuvre

<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>

Pour plusieurs lignes dans le « thead », utilisez ceci pour maintenir l'adhérence sur la première ligne :

thead tr:first-child th { position: sticky; top: 0; }

Support du navigateur

Depuis mars 2018, « position : sticky » est largement pris en charge dans les navigateurs modernes : https://caniuse.com/#feat=css-sticky

Crédit

Cette solution a été initialement proposée par @ctf0 dans un commentaire du 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!