Comment puis-je rendre le corps d'un tableau défilant avec une hauteur fixe ?

Réglage de la hauteur du corps avec défilement de débordement

Lorsque vous essayez de définir la hauteur d'un corps de table (tbody) avec défilement de débordement, les utilisateurs peuvent rencontrer des difficultés. Voici un guide étape par étape pour obtenir le résultat souhaité :

Pour vous assurer que le corps affiche une barre de défilement, spécifiez sa propriété d'affichage comme block. Cela permettra au contenu de circuler verticalement.

Ensuite, définissez la propriété d'affichage de chaque élément tr dans le tbody sur table. Cela conservera le comportement des lignes comme celui d'un tableau.

Pour répartir les cellules uniformément, utilisez la méthode table-layout:fixed; propriété sur l’élément de table parent. Cela garantit que toutes les cellules ont la même largeur et empêche le tableau de s'effondrer.

Il est important de noter que les approches modernes privilégient les dispositions en grille par rapport à la technique décrite ici. Les dispositions en grille offrent un contrôle amélioré et moins d'effets secondaires.

Voici un exemple CSS pour démontrer la solution :

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em);
}

table {
  width: 400px;
}

Si le corps n'affiche toujours pas de barre de défilement en raison d'un contenu insuffisant, explicitement définissez la propriété overflow-y pour scroll.

Cependant, il est crucial de reconnaître certains inconvénients de cela approche :

• Il sépare les grilles des cellules de tête et de corps, affectant potentiellement l'alignement.
• Il existe de meilleures alternatives disponibles de nos jours, telles que les dispositions de grille, qui évitent ces problèmes.

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!