Aggiungi barra di scorrimento orizzontale alla tabella html


142

C'è un modo per aggiungere una barra di scorrimento orizzontale a una tabella HTML? In realtà ho bisogno che sia scorrevole sia in verticale che in orizzontale a seconda di come cresce la tabella, ma non riesco a far apparire nessuna barra di scorrimento.


3
... hai pensato di mettere l'intero tavolo in un div? ... quindi aggiungi scorrere fino al div?
vettore

3
Forse è il momento di cambiare quale risposta è la risposta accettata?
Serge Stroobandt,

Risposte:


82

Hai provato la overflowproprietà CSS ?

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

AGGIORNAMENTO
Come sottolineato da altri utenti, questo non è sufficiente per aggiungere le barre di scorrimento.
Quindi, per favore, vedi e vota i commenti e le risposte di seguito.


15
Secondo i miei tentativi e tutto il resto che ho letto su Internet, semplicemente non funzionerà. Puoi traboccare un elemento wrapper, certo, ma non la tabella stessa.
Bloudermilk,

21
@bloudermilk Puoi aggiungerlo display: block.
Cees Timmerman,

244

Per prima cosa, crea un display: blocktavolo

quindi, impostare overflow-x:su auto.

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

Bello e pulito. Nessuna formattazione superflua.

Ecco altri esempi coinvolti con i sottotitoli delle tabelle scorrevoli da una pagina del mio sito Web.


3
Questo funziona per me in Chrome, ma solo dopo aver schiacciato tutto insieme. white-space: nowrap;aiuta a vedere immediatamente la barra di scorrimento.
Cees Timmerman,

28
In realtà l'ho provato prima. L'unico problema era che le celle della tabella non riempivano più l'intera larghezza della tabella.
Shevy,

4
Come detto da altri, questo non funziona correttamente: le righe della tabella non riempiono la larghezza della tabella.
Collimarco,

1
@SergeStroobandt no, nel mio caso white-space: nowrap;non risolve il problema (testato su Firefox). La larghezza delle righe è inferiore alla larghezza della tabella quando non c'è abbastanza contenuto (testo) per espandere le righe.
Collimarco,

3
@collimarco Nota Ho dovuto usare la larghezza massima: 100% per l'opzione blocco in linea.
dogoncouch,

40

Avvolgi la tabella in un DIV, impostato con il seguente stile:

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

8
Sembra che il overflow:autoqui non sia necessario. Conosci comunque per raggiungere questo obiettivo senza impostare la larghezza ... che sembra sempre essere la soluzione in html - hardcode un po 'di larghezza o altezza ma che sembra sconfiggere il punto di avere un motore di layout!
JonnyRaa,

17

Utilizzare l'attributo CSS " overflow " per questo.

Breve riassunto:

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

per esempio

table {
    display: block;
    overflow: scroll;
}

link fornito non funzionante
justingordon

12

Ho avuto un buon successo con la soluzione proposta da @Serge Stroobandt, ma ho riscontrato il problema che @Shevy aveva con le celle, quindi non riempiva l'intera larghezza della tabella. Sono stato in grado di risolvere questo problema aggiungendo alcuni stili a tbody.

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

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

Questo ha funzionato per me su Firefox, Chrome e Safari su Mac.


10

Non sono riuscito a far funzionare nessuna delle soluzioni precedenti. Tuttavia, ho trovato un trucco:

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>


Nessuna delle precedenti ha funzionato neanche per me, ma questo ha funzionato. Bello, grazie.
Gábriel,

@ Gábriel Sono contento che abbia funzionato per te. L'ho provato di nuovo proprio ora in Firefox e non sembra essere visualizzato correttamente :-( i.imgur.com/BcjSaCV.png Chrome sembra ancora buono.
mpen

1
Strano; Lo stavo usando esattamente su Firefox e ha funzionato lì, anche se non in questa configurazione esatta. Volevo renderizzare una grande griglia composta da div 10 x 10 px con bordi compressi e la larghezza massima + overflow-x: auto sembrava essere la chiave. Con quelli sul posto, tutto sembrava perfetto. Inoltre, non sto usando affatto <table>, solo div, con display: table, table-row e table-cell.
Gábriel il

10

Questo è un miglioramento della risposta di Serge Stroobandt e funziona perfettamente. Risolve il problema della tabella non riempiendo l'intera larghezza della pagina se ha meno colonne.

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

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

2
L' white-space: nowrap;sembra essere facoltativo.
Mike Shiyan,


2

Ho capito questa risposta basandomi sulla soluzione precedente ed è un commento e ho aggiunto alcune mie modifiche. Questo funziona per me sul tavolo reattivo.

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

@Saeed Intendevi qualcosa come la struttura html?
George,

Mio male, intendo aggiungere ulteriori spiegazioni, per aiutare a capirlo meglio
Mastisa,

Spero che questa versione sia più chiara.
George,

1

La "larghezza superiore al 100%" sul tavolo mi ha fatto davvero funzionare.

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

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


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

Indentazione e dati di esempio sarebbero utili se si intende demo qualcosa. Inoltre, intendevi "barra di scorrimento" anziché "menu a discesa"?
Cees Timmerman,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.