Une table avec à la fois un en-tête collant et une première colonne collante

Nous avons exploré comment les cellules de table individuelles (<th> et<code><td> ) peut utiliser <code>position: sticky . La création d'un en-tête de table collante est simple, le gardant visible tout en faisant défiler de nombreuses lignes. Cependant, l'adhérence s'étend au-delà du défilement vertical; L'adhérence horizontale est tout aussi utile. Nous pouvons même avoir plusieurs éléments collants dans une seule table, chacun collant dans différentes directions, ou même un seul élément collant dans plusieurs directions.

Cette vidéo montre une table avec à la fois un en-tête collant et une première colonne collante: [Supposons le lien vidéo ici - remplacez par un lien vidéo réel si disponible]

Le principal avantage? Références croisées améliorées dans les données tabulaires. Imaginez une table de score de baseball avec de nombreuses équipes; Garder les noms d'équipe et les numéros de manche visibles empêchent la perte de contexte pendant le défilement.

Toutes les tableaux ne nécessitent pas de référence bidirectionnelle. Beaucoup bénéficient de l'effondrement des lignes sur des écrans plus petits.

Le défi réside dans la gestion des éléments qui se chevauchent. Les cellules collantes nécessitent des arrière-plans pour prévenir la gestion du contenu et une gestion minutieuse z-index pour assurer une superposition correcte lorsqu'elle est coincée. La clé est la superposition:

• tbody > th doivent être au-dessus des cellules régulières pour la stabilité du défilement horizontal.
• Les cellules thead > th doivent être au-dessus des cellules tbody > th pour la stabilité verticale du défilement.
• thead > th:first-child doit avoir l' z-index le plus élevé, restant au-dessus des cellules du corps et des en-têtes de frères et sœurs pendant le défilement horizontal.

C'est un puzzle de superposition complexe, mais réalisable.

Merci à Cameron Clark pour la démo initiale et Estelle Weyl pour sa mise en œuvre antérieure - un témoignage de l'approche avant-gardiste d'Estelle.

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!