Comment puis-je créer un tableau avec un en-tête fixe et une première colonne fixe en utilisant uniquement CSS ?

Tableau avec en-tête et colonne fixes à l'aide de CSS pur

Créer un tableau avec un en-tête et une première colonne fixes sans JavaScript présente des défis sur navigateurs mobiles. Cet article explore une solution purement basée sur CSS qui réalise cette fonctionnalité de manière efficace.

Solution utilisant le positionnement collant CSS :

Les navigateurs Web modernes prennent en charge la position : propriété collante, qui permet aux éléments de coller à des bords spécifiques de leur bloc conteneur, soit horizontalement (gauche/droite) ou verticalement (haut/bas). En tirant parti de cette propriété, nous pouvons obtenir un en-tête de tableau fixe et une première colonne fixe.

Étapes de mise en œuvre :

1. Créer un conteneur : Placez votre table à l'intérieur d'un élément conteneur qui gérera le défilement.
2. Activer le défilement sur Conteneur : Spécifiez le débordement : faites défiler le conteneur pour activer le défilement horizontal/vertical.
3. Collez l'en-tête et les cellules de la première colonne : Utilisez le positionnement collant pour les en-têtes du tableau (thhead th) pour collez-vous en haut et pour que les cellules de la première colonne (le corps th) collent à gauche.
4. Corriger l'en-tête sur Colonne de gauche : Pour garantir que la cellule d'en-tête de la première colonne reste fixe, définissez left : 0 et z-index : 2 sur la tête th:first-child. L'index Z est utilisé pour garantir que la cellule d'en-tête reste au-dessus de la bordure émulée dans le style du corps.
5. Émuler la bordure pour la première colonne : Les navigateurs ont tendance à supprimer les bordures sur les éléments collants. Pour résoudre ce problème, nous émulons la bordure droite en utilisant une ombre de boîte sur le corps.

Code CSS :

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

Conclusion :

En combinant un conteneur défilant et un positionnement collant, nous pouvons créer un en-tête de tableau fixe et une première colonne fixe sans compter sur JavaScript. Cette solution est largement prise en charge par les navigateurs modernes et offre une expérience de défilement fluide sur les ordinateurs de bureau et les appareils mobiles.

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!