Comment puis-je créer un tableau défilant uniquement en CSS avec des en-têtes fixes ?

Tableau défilant CSS uniquement avec en-têtes fixes

Défi :

L'objectif est de créer un tableau déroulant avec des en-têtes fixes en-têtes utilisant uniquement CSS, garantissant la compatibilité entre navigateurs et répondant aux critères suivants :

• Maintenir alignement des colonnes entre l'en-tête, le pied de page et les lignes de contenu
• Gardez l'en-tête et le pied de page fixes pendant que le contenu défile verticalement
• Évitez de vous fier à JavaScript ou jQuery
• Utilisez uniquement les balises de tableau fournies (table, colgroup, col, thead, tbody, tfoot, tr, th, td)

Solution utilisant la position : collante :

La prise en charge de la position : collante doit être vérifiée avant de mettre en œuvre cette solution. Selon le W3C, une boîte à position collante est située de la même manière qu'une boîte à position relative. Cependant, le décalage est calculé par rapport à l'ancêtre le plus proche avec une boîte de défilement ou à la fenêtre si aucun ancêtre n'a de boîte de défilement.

Ce comportement s'aligne sur celui d'un en-tête statique. Attribuez la propriété de position collante aux éléments de cellule de tableau (th). Puisqu'un tableau n'est pas un élément de bloc qui respecte la taille qui lui est assignée, un élément wrapper est utilisé pour définir le débordement de défilement.

Exemple :

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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!