Come specificare l'altezza della tabella in modo che appaia una barra di scorrimento verticale?

100

Ho una tabella con molte righe sulla mia pagina. Vorrei impostare l'altezza della tabella, diciamo per 500px, in modo tale che se l'altezza della tabella è maggiore di quella, apparirà una barra di scorrimento verticale. Ho provato a utilizzare l' heightattributo CSS su table, ma non funziona.

css css-tables

— Misha Moroshko
fonte

Forse usalo al max-heightposto di heightcome quest'ultimo costringerà l'altezza del tavolo ad essere500px

— Fred

Puoi fare una seconda domanda, su come impedire lo scorrimento della riga di intestazione. ;)

— Bill Bingham

Vedi anche stackoverflow.com/questions/1587927/…

— Alex Nolasco

Risposte:

173

Prova a utilizzare la overflowproprietà CSS. Ci sono anche proprietà separate per definire il comportamento di overflow solo orizzontale ( overflow-x) e overflow verticale ( overflow-y).

Dal momento che vuoi solo lo scorrimento verticale, prova questo:

table {
  height: 500px;
  overflow-y: scroll;
}

MODIFICARE:

Apparentemente gli <table>elementi non rispettano la overflowproprietà. Ciò sembra essere dovuto al fatto che gli <table>elementi non vengono visualizzati come display: blockpredefiniti (in realtà hanno il proprio tipo di visualizzazione). Puoi forzare il overflowfunzionamento della proprietà impostando l' <table>elemento come tipo di blocco:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Nota che questo farà sì che l'elemento abbia una larghezza del 100%, quindi se non vuoi che occupi l'intera larghezza orizzontale della pagina, devi specificare una larghezza esplicita anche per l'elemento.

— AgentConundrum
fonte

Questo però non limita l'altezza.

— Fred

No, lo fa, hai solo bisogno display:blocksul tavolo per farlo comportare come un div jsfiddle.net/TSGSA/1

— Fred

@Fred: le grandi menti pensano allo stesso modo. Ho aggiornato la mia risposta mentre stavi commentando. :)

— AgentConundrum

Questa risposta mi ha davvero aiutato, ma invece di applicarla al tag table, dovrebbe essere fatta al tbody, in modo da consentire all'intestazione di rimanere statica durante lo scorrimento. Poi c'è uno stile da sistemare per quanto riguarda l'area nella thead che si trova sopra la barra di scorrimento.

— David

Se hai intenzione di usarlo su tbody, assicurati di aggiungere display: block a thead (e probabilmente tfoot) o potrebbero impazzire. Il problema, a quanto pare, è che una volta fatto questo, hai interrotto il collegamento tra thead e tbody: le colonne del primo non sono consapevoli della larghezza del secondo. Quindi lo rattoppi e scendi per il pendio scivoloso. "Sono morto per la bellezza ..."

— Cuse70

Devi avvolgere la tabella all'interno di un altro elemento e impostare l'altezza di quell'elemento. Esempio con CSS inline:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

— Dark Falcon
fonte

Ciò non consentirà di mantenere la spina in posizione mentre il corpo scorre.

— David

Questo requisito non è nella domanda originale.

— Dark Falcon

Inoltre, anche l'altra risposta (accettata) non tiene ferma la discussione.

— Brock Adams

Puoi ancora far sembrare che sia presente un'intestazione con questo metodo. Nascondi l'intestazione della tabella, quindi crei una seconda tabella sopra la prima tabella che contiene l'intestazione. Quindi, applica lo stile a entrambe le tabelle in modo che abbiano le display:table;loro righe display:table-row;e le loro celle display:table-cell;e le due tabelle corrisponderanno e sembreranno essere una. (NOTA: questo non funziona con tavoli molto grandi; fondamentalmente, li abbina quando possibile. Ho usato questa tecnica più volte.)

— levininja

Sicuro. La dimensione del genitore deve essere specificata per utilizzare le dimensioni relative. Ad esempio: jsfiddle.net/hz8wy

— Dark Falcon

per impostare l'altezza della tabella, è necessario prima impostare la proprietà CSS "display: block", quindi aggiungere le proprietà "larghezza / altezza". Trovo che questo articolo di Mozilla sia un'ottima risorsa per imparare a definire lo stile delle tabelle: Link

— krupesh Anadkat
fonte