Maison > interface Web > tutoriel CSS > Comment puis-je créer des tableaux HTML avec des barres de défilement verticales et horizontales ?

Comment puis-je créer des tableaux HTML avec des barres de défilement verticales et horizontales ?

Susan Sarandon
Libérer: 2024-11-20 13:28:16
original
647 Les gens l'ont consulté

How Can I Create HTML Tables with Both Vertical and Horizontal Scrollbars?

Réaliser des barres de défilement verticales et horizontales dans les tableaux HTML

Créer des tableaux qui nécessitent un défilement vertical et horizontal peut être un défi. Voici comment y parvenir en utilisant CSS :


  1. Afficher en bloc : Définir display: block pour que la table la traite comme un conteneur.

  2. Activer le défilement horizontal : Appliquer overflow-x: auto pour activer le défilement horizontal.

  3. Empêcher les sauts de ligne : Utilisez espace blanc : nowrap pour éviter des sauts de ligne excessifs dans les cellules du tableau.

Le code CSS suivant illustre cette approche :

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
Copier après la connexion

Exemple :

<table>
Copier après la connexion

Considérations supplémentaires :

  • Pour garantir la répartition de la largeur des cellules, ajoutez table tbody { display: table; largeur : 100 % ; } au CSS.
  • Référez-vous aux ressources externes pour des exemples plus avancés, tels que les légendes des tableaux défilants.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal