Existe-t-il un moyen d'ajouter une barre de défilement horizontale à un tableau HTML? En fait, j'ai besoin qu'il puisse faire défiler verticalement et horizontalement en fonction de la croissance de la table, mais je ne peux pas faire apparaître l'une ou l'autre barre de défilement.

Avez-vous essayé la overflowpropriété CSS ?

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

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

Tout d'abord, faites display: blockde votre table

puis réglez overflow-x:sur auto.

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

Agréable et propre. Pas de mise en forme superflue.

Voici des exemples plus complexes avec des légendes de tableau défilant à partir d'une page de mon site Web.

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

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

Utilisez l'attribut CSS " overflow " pour cela.

Court résumé:

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

par exemple

table {
    display: block;
    overflow: scroll;
}

J'ai eu un bon succès avec la solution proposée par @Serge Stroobandt, mais j'ai rencontré le problème que @Shevy avait avec les cellules alors ne remplissant pas toute la largeur du tableau. J'ai pu résoudre ce problème en ajoutant des styles au fichier 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.

Je n'ai pas réussi à faire fonctionner l'une des solutions ci-dessus. 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>

Ceci est une amélioration de la réponse de Serge Stroobandt et fonctionne parfaitement. Cela résout le problème du tableau qui ne remplit pas toute la largeur de la page s'il contient moins de colonnes.

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

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

Je rencontrais 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;
}

J'ai compris cette réponse en me basant sur la solution précédente et c'est un commentaire et j'ai ajouté quelques ajustements de ma part. 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;
}

La `` largeur supérieure à 100% '' sur la table a vraiment fonctionné pour moi.

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

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

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>