Comment créer un corps de tableau défilant avec un en-tête fixe à l'aide de CSS ?

Créer un corps de tableau défilant avec un en-tête fixe

Lorsque vous travaillez avec de grandes tables, il devient souvent nécessaire de fixer l'en-tête tout en permettant au corps de être défilable. De cette façon, les utilisateurs peuvent facilement naviguer dans les données sans perdre la trace des en-têtes de colonnes.

Utilisation de la position CSS : Sticky

Pour les navigateurs modernes comme Chrome, Firefox et Edge, une simple solution CSS peut fournir le comportement souhaité. En appliquant la position : collante ; haut : 0 ; Aux éléments, vous pouvez fixer l'en-tête en haut du tableau, tout en permettant au corps de défiler indépendamment.

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

CSS supplémentaire

Pour améliorer l'apparence et la fonctionnalité du tableau, inclure du CSS supplémentaire si nécessaire. Par exemple :

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

Structure HTML

Dans un div avec la classe "tableFixHead", ajoutez votre table avec les éléments thead et tbody.

<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!