Comment créer un en-tête fixe et un tableau de colonnes en utilisant uniquement CSS ?

Création d'un tableau avec en-tête et colonne fixes à l'aide de Pure CSS

Correction de l'en-tête :

Pour créer un en-tête fixe sans utiliser JavaScript, la propriété position: sticky peut être utilisée. Cette propriété prend en charge le collage d'éléments en haut et sur le côté dans les versions modernes des navigateurs Chrome, Firefox et Edge.

Correction de la première colonne :

Pour corriger la première colonne , la même propriété position: sticky peut être utilisée, mais avec un style left: 0 supplémentaire pour forcer l'élément à coller sur le côté gauche du table.

Exemple d'implémentation :

1. Placez la table à l'intérieur d'un conteneur avec une propriété overflow: scroll, qui permet le défilement dans le conteneur.
2. Utilisez la position : collante ; haut : 0 ; stylisez les éléments de tête pour coller la ligne d'en-tête en haut du tableau.
3. Ajouter une position : collante ; gauche : 0 ; au corps th pour corriger la première colonne.
4. Pour garantir que la ligne d'en-tête collante reste au-dessus de tous les autres éléments, définissez z-index : 1 sur le th.
5. Facultativement, ajoutez border-right : 1px solide #CCC ; et box-shadow : 1px 0 0 0 #ccc ; au corps pour émuler une bordure sur la colonne fixe.

Remarque : Pour garantir que cette configuration fonctionne correctement, il est important de fournir une largeur maximale et une hauteur maximale au conteneur.

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!