Comment implémenter un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales à l'aide de CSS et JavaScript ?

Tableau d'en-tête fixe avec barre de défilement horizontale et barre de défilement verticale activées

Cette question aborde le problème des en-têtes et des barres de défilement collants dans les tableaux HTML/CSS lorsque la taille du conteneur atteint un certain point.

Existant Solutions

Le problème est courant et diverses solutions ont été proposées, notamment :

• Tronquer ou masquer le débordement : Ceci peut être réalisé en utilisant des propriétés CSS comme overflow: caché ou text-overflow: points de suspension. Cependant, il peut ne pas être visuellement attrayant ou conserver l'intégralité des données.
• Utilisation des bibliothèques JavaScript : Plusieurs bibliothèques JavaScript, telles que DataTables et ScrollTable, fournissent des solutions pour créer des en-têtes et des barres de défilement fixes dans les tableaux. . Cependant, ces solutions peuvent nécessiter du code ou des dépendances supplémentaires.

Solution CSS uniquement

Bien que le CSS pur ne puisse pas obtenir entièrement des en-têtes et des barres de défilement fixes dans tous les scénarios, il peut fournir une solution partielle :

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed */
#header {
  position: sticky;
  top: -1px;
}

Solution CSS3 (non prise en charge dans IE8)

Pour un meilleur contrôle et une prise en charge améliorée, les propriétés CSS3 peuvent être utilisées :

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed and set its width */
#header {
  position: sticky;
  top: 0;
  width: 100%;
}

Remarque : Ces solutions supposent que l'en-tête et le corps du tableau ont des largeurs fixes. Si les largeurs ne sont pas fixes, des règles ou calculs CSS supplémentaires peuvent être nécessaires.

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!