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

Pour ce qu'elle vaut, la meilleure réponse que j'ai trouvée se trouve ici : https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}

Answer 2

Les solutions semblent un peu exagérées. Le plus propre est de l'entourer d'une div comme ceci :

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

Answer 3

J'ai essayé toutes les solutions ci-dessus mais j'ai rencontré quelques problèmes.

Si l'on ajoute display: 'block' au tableau, les cellules n'occupent pas toute la largeur. Si nous l'ajoutons à l'enveloppe du tableau, l'en-tête de votre tableau personnalisé comme la recherche, le filtre, etc. défilera également, ce qui n'est pas très esthétique.

J'ai pu obtenir le comportement attendu en ajoutant overflow-x: auto à l'enveloppe corporelle du tableau.

Les cellules prennent toute la largeur, même avec moins de colonnes, et une barre de défilement apparaît automatiquement si nécessaire.

Answer 4

Comme nous l'avons déjà dit, l'utilisation de display:block; sur la table est mauvais. J'ai essayé la plupart des réponses de ce fil, mais aucune n'a fonctionné comme je le souhaitais. Si votre HTML est structuré comme ceci :

<div>
  <table>
    <tbody>

Si vous souhaitez que la div parent soit défilable horizontalement, vous pouvez essayer ce qui suit :

.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto;
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

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

<div class="x-auto">
  <table class="table text-left">
    <tbody>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
      </tr>
      <tr>
        <td>Some short text!</td>
        <td>Some really long text, like really really really really really really really really really really really really long!</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 5

//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>