étendre les tables HTML avec défilement horizontal

lorsqu'ils traitent de tables de données étendues, il devient nécessaire pour améliorer l'expérience utilisateur en fournissant à la fois des capacités verticales et horizontales de défilement. Cet article explique comment ajouter une barre de défilement horizontale à une table HTML, garantissant une navigation transparente quelle que soit la taille du contenu du tableau.

En tant que bloc: définissez la propriété d'affichage de l'élément à bloquer. Cela permet à la table d'occuper toute la largeur de son conteneur.

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 de la table dépasse la largeur disponible.
1. table { Affichage: bloc; Overflow-X: Auto; Espace blanc: Nowrap; }
2. Considérations supplémentaires

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

table tbody { Affichage: table; Largeur: 100%; }

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