Comment conserver les en-têtes de tableau fixes lors du défilement du corps du tableau ?

Correction des en-têtes de tableau avec un corps défilant

Maintenir des en-têtes de tableau fixes tout en permettant au corps de défiler est une exigence courante dans le développement Web. Pour y parvenir, utilisez l'approche suivante :

1. Enveloppez le contenu du tableau dans deux éléments imbriqués :

• Créez un élément de tableau externe (par exemple, #mainTable) pour contenir l'intégralité du tableau.
• Créez un élément de tableau interne (par exemple. , #innerTable) pour contenir le corps du tableau qui doit défiler.

2. Définir la hauteur de la table extérieure :

• Appliquer une hauteur fixe à la table extérieure à l'aide de CSS (par exemple, #mainTable {hauteur : 500 px ; }).

3. Positionner la table interne :

• Positionnez la table interne de manière absolue dans la table externe à l'aide de CSS (par exemple, #innerTable { position: absolue; haut: 0; bas: 0; largeur: 100%; }).

4. Corriger les en-têtes :

• Appliquer la position : collant ; aux lignes d'en-tête du tableau intérieur (par exemple, #innerTable th { position : sticky ; top : 0 ; }).

5. Activer le défilement :

• Assurez-vous que la hauteur de la table interne dépasse la hauteur de la table externe, déclenchant ainsi le débordement vertical.
• Activez le défilement sur la table interne à l'aide de CSS (par exemple, #innerTable { débordement : automatique ; }).

Exemple :

<div></div>

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!