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

Tableau avec en-tête fixe et colonne fixe en utilisant Pure CSS

Introduction :

Création d'un tableau avec un en-tête fixe et une première colonne fixe peut fournir une expérience utilisateur stable et rationalisée pour afficher de grands ensembles de données ou des tableaux qui s'étendent au-delà de la fenêtre d'affichage visible. Traditionnellement, JavaScript ou jQuery sont utilisés à cette fin. Toutefois, cela peut rencontrer des problèmes de performances sur les navigateurs mobiles. Cet article explore une solution CSS pure pour obtenir cette fonctionnalité tout en conservant un défilement fluide.

Utilisation du CSS Sticky Positioning :

La propriété CSS position: sticky permet aux éléments de s'en tenir à le haut, le côté ou les deux lorsqu'il défile au-delà d'un certain point. Cette propriété peut être appliquée pour obtenir un effet d'en-tête et de colonne fixes.

Étapes :

1. Enveloppez le tableau dans un conteneur : Créez un conteneur div pour contenir la table.
2. Activez le défilement dans le conteneur : Appliquer débordement : défilement ; à l'élément conteneur.
3. Collez l'en-tête en haut : Positionnez la rangée d'en-tête (thead tr) en utilisant la position : sticky et top : 0 ;.
4. Collez la première colonne sur le côté : Positionnez les cellules de la première colonne (tbody td:first-child ou tbody th:first-child) en utilisant position : collant et gauche : 0 ;.
5. Appliquer un style pour améliorer l'apparence : Améliorez l'attrait visuel en ajoutant un style aux éléments du tableau, de l'en-tête et de la colonne.

Considérations supplémentaires :

• Conteneur dimensions : Assurez-vous que le conteneur possède les propriétés max-width et max-height appropriées pour limiter le défilement.
• z-index : Utilisez z-index pour contrôler l'ordre de chevauchement des éléments collants .
• Prise en charge du navigateur : La position : la propriété sticky est prise en charge dans les versions modernes de Chrome, Firefox et Edge.

Exemple de code :

.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

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

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody td, tbody th {
  padding: 0.5em;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

Conclusion :

En utilisant le positionnement collant CSS, il est possible d'obtenir un en-tête fixe et un effet de première colonne fixe dans un tableau sans recourir à JavaScript. Cette solution propose une approche purement basée sur CSS qui garantit des performances de défilement fluides, notamment sur les navigateurs 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!