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

J'ai trouvé cette réponse en me basant sur solution précédente et son commentaire et j'y ai ajouté quelques ajustements de mon cru. Cela fonctionne pour moi sur la table réactive.

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

Answer 2

La mention "plus de 100 % de la largeur" dans le tableau m'a permis d'obtenir de bons résultats.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

Answer 3

Avec bootstrap

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>

Answer 4

Ajouter la balise table à l'élément div avec style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 5

Voici ce qui a fonctionné pour moi

.wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.wrapper table {
  width: auto;
  min-width: 100%;
}

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