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

Comment créer des tableaux défilants avec des en-têtes fixes en CSS

Améliorer les tableaux avec des en-têtes fixes tout en conservant un corps défilant est une exigence courante dans le développement Web. Cet article examinera une solution complète utilisant CSS.

Le problème

Dans le scénario fourni, un tableau dans un conteneur déroulant a du mal à conserver son en-tête lors du défilement. Le problème sous-jacent vient du fait que l'en-tête et le corps sont inextricablement liés, ce qui les fait défiler ensemble.

La solution

La clé pour résoudre ce problème réside dans la séparation de l'en-tête du tableau ( ) de son corps (). En définissant display: block pour les deux éléments, nous rompons leur connexion intrinsèque, leur permettant de fonctionner indépendamment.

Pour introduire des capacités de défilement dans le corps, attribuez overflow: auto et spécifiez la hauteur souhaitée. De plus, pour éviter que l'en-tête ne dérive pendant le défilement, corrigez sa largeur à l'aide de CSS.

Extrait de code

table tbody, table thead {
    display: block;
}

table tbody {
    overflow: auto;
    height: 100px;
}

th {
    width: 72px;
}

td {
    width: 72px;
}

Considérations supplémentaires

• HTML manquant Éléments : Assurez-vous que toutes les lignes sont entourées de éléments, y compris la ligne d'en-tête.
• Contrôle de la largeur des colonnes : Pour un contrôle nuancé des largeurs de colonnes tout en conservant l'alignement, pensez à utiliser le code suivant :

table th:nth-child(1), td:nth-child(1) { min-width: 50px; max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
/* ... and so on for each subsequent column */

Conclusion

En séparant l'en-tête et le corps du tableau et en implémentant les propriétés CSS susmentionnées, nous créons avec succès un tableau déroulant avec des valeurs fixes en-têtes, répondant aux exigences de la requête d'origine.

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!