Comment puis-je définir une hauteur pour le corps d'un tableau (tbody) et activer le défilement par débordement en HTML ?

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

Un problème courant rencontré lors de l'utilisation de tableaux HTML est l'impossibilité de définir une hauteur pour le tableau. body (tbody) tout en permettant le défilement par débordement. Cela peut conduire à ce que les données du tableau soient coupées ou n'apparaissent pas comme prévu.

Pour résoudre ce problème, il est nécessaire d'ajuster les propriétés CSS du tbody et de la table contenant :

1. Styles de corps :

• Définir l'affichage : bloc ; pour supprimer la disposition de grille de table par défaut, permettant au tbody de se comporter comme un élément de niveau bloc.
• Spécifiez la hauteur souhaitée pour le tbody à l'aide de height.
• Activez le débordement en définissant overflow : scroll ; .

2. Styles de table :

• Définir le débordement : caché ; pour empêcher le contenu de déborder en dehors de la table.
• Utilisez table-layout:fixed; pour assurer une répartition uniforme des largeurs de colonnes.

3. Table conteneur :

Dans certains cas, il peut être nécessaire d'envelopper la table dans un div conteneur et de définir le débordement-y du div pour qu'il défile afin d'activer le défilement vertical.

En suivant Ces étapes, vous pouvez définir efficacement une hauteur pour le corps tout en conservant le défilement par débordement, vous permettant d'afficher les données du tableau sans qu'elles soient coupées ou caché.

Exemple de code :

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

  table {
    table-layout: fixed;
    overflow: hidden;
  }

  #table-container {
    overflow-y: scroll;
  }
</style>

<div><p><strong>Remarque :</strong> Cette approche peut présenter certaines limites ou inconvénients, tels qu'un désalignement potentiel de l'en-tête et cellules du corps. Il est important de tester et d'ajuster le CSS si nécessaire pour répondre aux exigences spécifiques de votre table.</p></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!