Comment créer un tableau déroulant avec des en-têtes fixes à l'aide de CSS ?

Création d'un tableau défilant avec des en-têtes fixes à l'aide de CSS

Lors de la création de tableaux qui nécessitent un défilement en raison de données excessives, il peut être utile d'avoir l'en-tête du tableau est corrigé tandis que les lignes de données défilent indépendamment. Cet article fournira une solution détaillée pour y parvenir en utilisant CSS.

Solution

Pour créer un tableau déroulant avec des en-têtes fixes, il est essentiel de séparer les éléments d'en-tête de les lignes de données utilisant le et balises. Le style CSS peut ensuite être appliqué pour contrôler leur comportement d'affichage et de défilement.

Styles CSS :

table tbody, table thead {
  display: block;
}

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

th {
  width: 72px;
}

td {
  width: 72px;
}

La propriété display: block sur et sépare les éléments d'en-tête et de corps, leur permettant de se comporter indépendamment. débordement : auto et hauteur sur activer le défilement des lignes de données. Les largeurs statiques sont définies pour et pour garantir l'alignement.

Remarque : Assurez-vous que le La balise est utilisée à la fois pour les lignes d'en-tête et de données.

Contrôle amélioré des largeurs de colonnes :

Pour les tableaux avec différentes largeurs de colonnes, utilisez CSS pour spécifier les largeurs minimale et maximale. :

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; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

Cette technique permet un contrôle granulaire sur les largeurs de colonnes tout en conservant l'alignement entre l'en-tête et les données lignes.

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!