Comment puis-je créer des en-têtes de tableau collants dans une division défilante ?

Positionnement Sticky dans un élément défilant avec un tableau

La propriété CSS récemment introduite position : sticky permet aux éléments de rester fixes dans leur conteneur parent pendant le défilement. Cependant, il y a une question concernant sa fonctionnalité au sein d'un div défilant qui contient un tableau.

La situation actuelle

Au départ, on pensait que la position : sticky ne pouvait que travailler dans son élément parent. Cependant, il a été découvert que cette propriété peut être utilisée pour créer des en-têtes de tableau collants au sein d'un div défilant.

La solution

Pour y parvenir, ajoutez simplement ce qui suit ligne à votre feuille de style :

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

La ligne et des éléments sont requis pour que ce style fonctionne.

Plusieurs lignes d'en-tête

Si votre tableau comporte plusieurs lignes dans , vous pouvez rendre la première ligne collante en utilisant le code suivant :

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

Support des navigateurs

Depuis mars 2018, la prise en charge de position : sticky est répandue dans les navigateurs modernes. Vous pouvez vérifier les dernières informations de compatibilité sur https://caniuse.com/#feat=css-sticky.

Crédit

Le mérite de cette découverte revient à @ ctf0, qui a partagé cette technique en 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!