web-dev-qa-db-fra.com

Ajouter une barre de défilement horizontale au tableau html

Est-il possible d’ajouter une barre de défilement horizontale à un tableau HTML? En fait, j'ai besoin que le défilement soit verticalement et horizontalement, en fonction de la croissance du tableau, mais je ne parviens pas à faire apparaître une barre de défilement.

htmlcsshtml-tablescrollbar
90
Tsundoku

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

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

METTRE À JOUR
Comme le soulignent les autres utilisateurs, cela ne suffit pas pour ajouter les barres de défilement.
Alors, s'il vous plaît, voir et faire voter les commentaires et les réponses ci-dessous.

58
pasine

Commencez par créer un display: block de votre table

puis définissez overflow-x: sur auto.

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

Agréable et propre. Pas de formatage superflu.

Voici des exemples plus compliqués avec des légendes de tableau défilantes d'une page de mon site Web.

143
Serge Stroobandt

Enveloppez la table dans une DIV, définie avec le style suivant:

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

Utilisez pour cela l’attribut CSS " overflow ".

Court résumé:

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

par exemple.

table {
    display: block;
    overflow: scroll;
}
16
Roger Willcocks

Je courais dans 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;
}
7
Josh

Je ne pouvais obtenir aucune des solutions ci-dessus au travail. Cependant, j'ai trouvé un hack:

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>

5
mpen

Ceci est une amélioration de la réponse de { Serge Stroobandt } _ et fonctionne parfaitement. Cela résout le problème du tableau ne remplissant pas toute la largeur de la page s'il y a moins de colonnes.

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

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

J'ai trouvé cette réponse basée sur solution précédente et son commentaire et ajouté quelques ajustements de ma propre Cela fonctionne pour moi sur la table sensible.

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;
}
2
George Wu

J'ai eu un bon succès avec la solution proposée par @Serge Stroobandt, mais j'ai rencontré le problème rencontré par @ Shevy avec les cellules qui ne remplissaient alors pas toute la largeur de la table. J'ai pu résoudre ce problème en ajoutant quelques styles à la 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.

2
Mary7678

Le «plus de 100% de largeur» sur la table a vraiment fonctionné pour moi.

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

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

0
Peps