Maison >interface Web >tutoriel CSS >Comment puis-je créer un tableau avec un en-tête et une colonne fixes en utilisant uniquement 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 :
Considérations supplémentaires :
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!