"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > 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 des en-têtes fixes à l'aide de CSS ?

Publié le 2024-12-22
Parcourir:253

How to Create Scrollable Tables with Fixed Headers Using 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 se trouver dans un élément et les données du tableau dans un élément

.

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 les éléments

pour un alignement correct. Si vous souhaitez varier la largeur des colonnes, utilisez le sélecteur de nième enfant dans CSS.

Remarque : Cette approche convient aux tableaux plus petits. Pour les très grandes tables, envisagez d'utiliser une technique différente, telle que la virtualisation ou une bibliothèque tierce.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3