Comment définir correctement la hauteur du corps avec le défilement par débordement dans les tableaux HTML ?

Définition de la hauteur du corps avec le défilement de débordement

Lorsque vous travaillez avec des tableaux en HTML, il est parfois nécessaire de restreindre la hauteur de l'élément tbody tout en activant défilement par débordement. Malheureusement, utiliser la propriété display: scroll sur tbody seule est insuffisant.

Pour obtenir l'effet souhaité, une combinaison de propriétés CSS est requise :

1. Affichage du bloc :

Définir l'affichage : bloquer le corps pour le sortir du flux de la table et lui permettre de prendre sa propre largeur et sa propre hauteur.

2. Hauteur fixe :

Spécifiez la hauteur : 50px (ou comme vous le souhaitez) sur le corps pour définir sa hauteur.

3. Affichage du tableau pour les lignes du tableau :

Définissez l'affichage : tableau sur les éléments tr du corps du tableau pour conserver leur comportement semblable à celui d'un tableau.

4. Disposition de la table fixe :

Utilisez la disposition de la table : fixe sur la tête et le corps pour garantir une répartition uniforme des cellules.

5. Ajuster la largeur de la tête :

Pour compenser la largeur de la barre de défilement, réduisez légèrement la largeur de la tête en utilisant width : calc(100% - 1em).

Exemple :

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;
}

Remarque :

Au départ, la barre de défilement peut ne pas apparaître si le corps le contenu est plus court que la hauteur spécifiée. Pour garantir une barre de défilement à tout moment, définissez overflow-y: scroll sur le corps.

De plus, il est important de considérer les limites de cette approche par rapport à d'autres options telles que la disposition en grille ou les solutions basées sur JavaScript.

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!