Pourquoi mon corps ne défile-t-il pas ?

Résolution du défilement par débordement dans les corps de table (tbody)

Dans le but de définir la hauteur d'un élément tbody tout en activant le défilement par débordement, vous avez peut-être rencontré le CSS suivant extrait :

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

Malgré la mise en œuvre de ce style, l'élément tbody ne répond pas au défilement. Pour remédier à ce problème, pensez à utiliser les règles CSS suivantes :

• display: block; for tbody : Transformez l'élément tbody en élément bloc pour permettre le défilement.
• display: table; pour tr : conservez le comportement de la table en définissant la propriété d'affichage de chaque élément tr sur table.
• table-layout : corrigé ; pour tr et thead : assurez une répartition uniforme des cellules en utilisant table-layout: fixed; pour les éléments tr et thead.

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); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

Dans le cas où l'élément tbody ne parvient toujours pas à afficher une barre de défilement en raison d'un contenu insuffisant, définissez explicitement la propriété overflow sur overflow-y: scroll; pour forcer l'apparition d'une barre de défilement.

tbody {
  ...
  overflow-y: scroll;
}

Remarque : Il est crucial d'être conscient que cette approche pour réaliser le défilement des tableaux peut avoir des limites dans certains scénarios. En particulier, cela peut entraîner un désalignement entre les cellules de l’en-tête et du corps. Si l'alignement est crucial, envisagez d'utiliser une technique de mise en page plus robuste telle que CSS Grid.

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!