Comment 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

Dans cette question, l'utilisateur cherche à créer des tableaux déroulants avec des en-têtes et des pieds de page fixes en utilisant CSS seulement. Leurs exigences spécifiques incluent :

• Préserver l'alignement des colonnes entre l'en-tête, le pied de page et les lignes de contenu
• Garder l'en-tête et le pied de page fixes tout en permettant au contenu de défiler verticalement
• Réaliser cela uniquement avec des balises de tableau HTML et des règles CSS
• Assurer tous les navigateurs compatibilité

Réponse

Une solution possible est d'utiliser la position : propriété collante. Selon le W3C, position: sticky définit la position d'un élément par rapport à son ancêtre avec une boîte de défilement ou la fenêtre d'affichage si aucun ancêtre ne défile.

Cependant, certains navigateurs (par exemple Chrome, IE, Edge) ont rencontré des problèmes lors de l'attribution d'une position : collant aux lignes d'en-tête du tableau ( ou ). Une approche alternative qui semble fonctionner pour les tableaux consiste à l'attribuer aux cellules du tableau ().

Pour obtenir l'effet souhaité, l'utilisateur peut considérer le code suivant :

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

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

Ce code enveloppe la table dans un div avec overflow: auto pour établir une zone de défilement. Les en-têtes du tableau se voient attribuer une position collante, garantissant qu'ils restent fixes lorsque le contenu défile verticalement.

Style supplémentaire pour l'esthétique

L'extrait inclut un style CSS supplémentaire pour améliorer l'apparence. l'apparence du tableau, mais ces esthétiques ne sont pas essentielles à la fonctionnalité principale d'un tableau déroulant avec en-têtes fixes.

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!