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

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

Dans le développement Web, il est souvent nécessaire de créer des tableaux avec de grandes quantités de données qui nécessitent un défilement. Cependant, conserver un en-tête fixe tout en faisant défiler le corps du tableau peut s'avérer difficile. Voici comment obtenir cet effet :

Structure HTML

Tout d'abord, nous devons nous assurer que notre structure HTML est correcte. Nous avons un div externe avec une barre de défilement, un div interne contenant le tableau et les en-têtes du tableau doivent être dans un données d'élément et de table dans un element.

<div>

Styles CSS

Maintenant, nous devons styliser le tableau en utilisant CSS :

/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}

Considérations supplémentaires

Assurez-vous que tous les en-têtes et cellules de données sont inclus dans éléments pour un bon alignement. Si vous souhaitez varier la largeur des colonnes, utilisez le sélecteur nième enfant en CSS.

Remarque : Cette approche convient aux tables plus petites. Pour les très grandes tables, pensez à utiliser une technique différente, comme la virtualisation ou une bibliothèque tierce.

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!