Ajouter une barre de défilement horizontale à un tableau HTML

Question

Existe-t-il un moyen d'ajouter une barre de défilement horizontale à un tableau HTML ? J'ai besoin qu'il soit défilable à la fois verticalement et horizontalement en fonction de la croissance du tableau, mais je n'arrive pas à faire apparaître l'une ou l'autre des barres de défilement.

Answer 1

Tout d'abord, faites un display: block de votre table

puis, définir overflow-x: à auto .

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

Agréable et propre. Pas de formatage superflu.

Voici des exemples plus complexes avec des légendes de tableaux déroulants à partir d'une page de mon site web.

Si les cellules ne remplissent pas tout le tableau, ajoutez le code CSS suivant :

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

Answer 2

Avez-vous essayé le CSS overflow propriété ?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

MISE À JOUR
Comme le soulignent d'autres utilisateurs, ce n'est pas suffisant pour ajouter les barres de défilement.
Je vous invite donc à lire les commentaires et les réponses ci-dessous et à leur attribuer un "upvote".

Answer 3

Enveloppez le tableau dans un DIV, défini avec le style suivant :

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

Answer 4

Il s'agit d'une amélioration de Serge Stroobandt et fonctionne parfaitement. Elle résout le problème du tableau qui ne remplit pas toute la largeur de la page s'il a moins de colonnes.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

Answer 5

Utilisez l'attribut CSS " débordement " pour cela.

En bref :

overflow: visible|hidden|scroll|auto|initial|inherit;

par exemple

table {
    overflow: scroll;
}