Comment ajouter des barres de défilement horizontales (et verticales) à un tableau HTML ?

Comment ajouter une barre de défilement horizontale à un tableau HTML

Cette question explore le défi lié à l'ajout de barres de défilement horizontales et verticales à un tableau HTML, rencontrant initialement des difficultés d'affichage soit la barre de défilement.

Pour y parvenir, suivez les étapes décrites dans la réponse fournie :

Tout d'abord, modifiez le CSS en définissant display: block, qui permet le défilement horizontal. Ensuite, ajoutez overflow-x: auto pour activer le défilement horizontal automatique. Cela devrait garantir que le tableau défile horizontalement lorsque son contenu dépasse la largeur disponible.

L'extrait de code fourni pour cette solution comprend :

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Ce CSS permet effectivement le défilement horizontal tout en empêchant la ligne des sauts dans les cellules du tableau, garantissant un affichage propre et concis.

De plus, la réponse fournit des exemples plus complexes de légendes de tableau défilant, présentant divers CSS techniques pour obtenir le comportement souhaité. Pour résoudre le problème des cellules du tableau ne remplissant pas tout le tableau, la réponse suggère d'ajouter le code CSS :

table tbody {
    display: table;
    width: 100%;
}

En implémentant ces configurations CSS, vous pouvez créer un tableau HTML qui prend en charge le défilement horizontal et vertical, s'adapter efficacement à différentes tailles et contenus de tables.

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!