Comment créer un tableau HTML déroulant avec des en-têtes fixes ?

Création d'un tableau HTML à défilement

En HTML, l'affichage d'un tableau à défilement vertical peut être réalisé en suivant ces étapes :

1. Enveloppez le tableau dans un div : Créez un élément div et définissez ses propriétés CSS pour qu'elles aient une position relative et une hauteur fixe pour limiter l'espace vertical disponible pour la table.
2. Définissez le débordement sur auto : Définissez la propriété de débordement du div sur "auto" pour activer le défilement vertical lorsque la table le contenu dépasse la hauteur du div.
3. Appliquer le positionnement aux en-têtes du tableau : Si vous voulez les en-têtes du tableau (thead) pour rester fixe pendant le défilement, définissez la propriété position des éléments thead sur "absolu" et positionnez-les à l'aide des propriétés CSS haut, gauche ou droite.
4. Définissez la largeur fixe pour les colonnes du tableau : Assurez-vous les colonnes du tableau ont une largeur fixe pour éviter qu'elles ne soient redimensionnées lors du défilement.

Voici un exemple qui intègre ces éléments étapes :

<div>

Dans cet exemple, le div "table-wrapper" a une hauteur fixe et un débordement défini sur "auto", permettant le défilement vertical. Les en-têtes du tableau (thead) ont un positionnement absolu et sont fixes en haut tandis que le corps du tableau (tbody) contient les données défilantes.

En suivant ces étapes, vous pouvez créer un tableau HTML qui conserve une taille définie avec en-têtes fixes, tout en permettant au corps de défiler pour différentes quantités de données.

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!