Comment puis-je créer un tableau HTML à défilement horizontal ?

Réaliser des tableaux HTML défilants : un guide des barres de défilement horizontales

L'ajout de barres de défilement verticales et horizontales à un tableau HTML peut initialement sembler insaisissable. Cependant, en comprenant les styles CSS fondamentaux, cela devient un processus simple.

Rendre le tableau défilable horizontalement

Pour activer le défilement horizontal, les étapes suivantes sont cruciales :

1. Définir 'affichage : bloquer ;' sur la table : Cela garantit que la table se comporte comme un élément de niveau bloc, lui permettant de franchir les lignes si nécessaire.
2. Appliquer 'overflow-x: auto;' au tableau : Ceci active l'apparition automatique d'une barre de défilement horizontale lorsque le contenu du tableau dépasse sa largeur horizontale.

Voici un exemple :

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

Considérations supplémentaires

1. Hauteur des cellules Incompatibilité : Parfois, les cellules du tableau peuvent ne pas remplir entièrement le tableau, ce qui nécessite le CSS supplémentaire suivant :

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

2. Légendes du tableau défilant : Pour des scénarios plus complexes impliquant le défilement légendes des tableaux, considérez les exemples complets fournis dans la page Web référencée.

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!