Comment ajouter un défilement horizontal aux tableaux HTML ?

Extension des tableaux HTML avec défilement horizontal

Lorsque vous traitez des tableaux de données volumineux, il devient nécessaire d'améliorer l'expérience utilisateur en fournissant à la fois des tableaux verticaux et capacités de défilement horizontal. Cet article explique comment ajouter une barre de défilement horizontale à un tableau HTML, garantissant une navigation transparente quelle que soit la taille du contenu du tableau.

Ajout d'une barre de défilement horizontale

Pour obtenir un défilement horizontal , suivez ces étapes :

1. Affichez le tableau sous forme de bloc : Définissez la propriété d'affichage du élément à bloquer. Cela permet au tableau d'occuper toute la largeur de son conteneur.
2. Activer le défilement horizontal : Utilisez la propriété overflow-x et définissez-la sur auto. Cela demande au navigateur d'afficher une barre de défilement horizontale lorsque le contenu du tableau dépasse la largeur disponible.

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

Considérations supplémentaires

• Pour garantir que les cellules remplissent tout le tableau, ajoutez le code suivant à votre CSS :

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

• Pour en savoir plus comportement de défilement avancé, reportez-vous à cette ressource : [Scrolling Table Captions](https://www.lizkeogh.com/html-table-caption-scroll-without-floats/).

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!