Comment ajouter une barre de défilement à un tableau HTML tout en gardant l'en-tête fixe ?

Affichage de la barre de défilement sur un tableau HTML

Pour afficher une barre de défilement sur un tableau HTML, envisagez l'approche suivante :

Enveloppez la table dans un div positionné

Entourez la table dans un élément div avec un position relative ou absolue. Ce div agira comme un conteneur pour la zone de défilement.

<div>

Définissez le débordement sur Auto sur le Div

Appliquez le CSS débordement de propriété : auto vers le conteneur div. Cela permet le débordement de contenu lorsque la table dépasse ses limites.

#table-container { overflow: auto; >

Positionner l'en-tête du tableau de manière absolue

Pour garder l'en-tête du tableau fixe lors du défilement, positionnez les éléments d'en-tête de manière absolue.

#table-header { position : absolu; >

Définir la hauteur du conteneur

Spécifiez une hauteur pour le div du conteneur afin de définir la zone de défilement.

#table-container { height : 400 pixels ; >

Exemple de mise en œuvre

<div>

#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

Cette approche fournit une barre de défilement tout en maintenant l'en-tête du tableau fixé en haut.

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!