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

Editer : @WickyNilliams a noté que le fait de définir display : block sur le corps d'un tableau privera le tableau de sa sémantique et n'est donc pas une bonne solution pour des raisons d'accessibilité.

J'ai bien réussi avec la solution proposée par @Serge Stroobandt, mais j'ai rencontré le problème de @Shevy avec les cellules qui ne remplissaient pas toute la largeur du tableau. J'ai pu résoudre ce problème en ajoutant quelques styles à l'élément tbody .

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

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

Cela a fonctionné pour moi dans Firefox, Chrome et Safari sur Mac.

Answer 2

Je n'ai réussi à faire fonctionner aucune des solutions ci-dessus. Cependant, j'ai trouvé une solution :

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Answer 3

J'ai rencontré le même problème. J'ai découvert la solution suivante, qui n'a été testée que dans Chrome v31 :

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Answer 4

Insérer le tableau à l'intérieur d'une div, de manière à ce que le tableau prenne toute la longueur.

HTML

<div class="scroll">
 <table>  </table>
</div>   

CSS

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

Answer 5

.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}

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

table peut avoir n'importe quel width . J'utilise généralement 100% o max-content pour la table.