Come impostare l’altezza del torso con scorrimento per eccesso

Sto affrontando un problema durante l’impostazione della scrollatura dello straripamento della larghezza dell’altezza del corpo.

 tbody{ height:50px;display:block;overflow:scroll }  

Table B

Name phone
AAAA 323232
BBBBB 323232
CCCCC 3435656

Visita il mio violino qui

Voglio la tabella B come la tabella A con scorrimento di overflow.

Qualsiasi aiuto sarà apprezzato.

Molte grazie, M.

se vuoi che tbody mostri una pergamena, trasformala in un block .

Per mantenere il comportamento del table , trasforma tr in table .

per spruzzare uniformsmente le celle, utilizzare il table-layout:fixed;

DEMO rotolo di tbody


CSS per il tuo test HTML:

 table ,tr td{ border:1px solid red } tbody { display:block; height:50px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */ } table { width:400px; } 

Se tbody non mostra uno scorrimento, poiché il contenuto è inferiore height o height max-height , imposta lo scorrimento in qualsiasi momento con: overflow-y:scroll; . DEMO 2

È un modo semplice per usare la barra di scorrimento sul corpo del tavolo

 /* It is simple way to use scroll bar to table body*/ .tableBodyScroll tbody { display: block; max-height: 300px; overflow-y: scroll; } .tableBodyScroll thead, tbody tr { display: table; width: 100%; table-layout: fixed; } 
 
Invoice Number Purchaser Invoice Amount Invoice Date
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017
INV-1233 Dinesh Vaitage $300 01/12/2017

Per impostazione predefinita, l’ overflow non si applica agli elementi del gruppo di tabelle a meno che non forniate un display:block to

inoltre dovete dare una position:relative e display: block to

. Controlla la DEMO .

 .fixed { width:350px; table-layout: fixed; border-collapse: collapse; } .fixed th { text-decoration: underline; } .fixed th, .fixed td { padding: 5px; text-align: left; min-width: 200px; } .fixed thead { background-color: red; color: #fdfdfd; } .fixed thead tr { display: block; position: relative; } .fixed tbody { display: block; overflow: auto; width: 100%; height: 100px; overflow-y: scroll; overflow-x: hidden; } 

Cambia il tuo secondo codice tabella come di seguito.

 
Name phone
AAAA 323232
BBBBB 323232
CCCCC 3435656

DEMO JSFIDDLE

Immagino che quello che stai cercando di fare sia mantenere l’intestazione fissa e far scorrere il contenuto del corpo. Puoi scorrere il contenuto in 2 direzioni:

  • orizzontalmente: non sarà ansible scorrere il contenuto orizzontalmente a meno che non si usi un cursore (ad esempio un cursore jQuery). Consiglierei di evitare l’uso di un tavolo in questo caso.
  • verticalmente: non è ansible ottenere ciò con un tag tbody , perché si assegna display:block o display:inline-block interromperà il layout della tabella.

Ecco una soluzione che utilizza divs : JSFiddle

HTML:

 
Name
Phone
AAAAAA
323232
BBBBBB
323232
CCCCCC
3435656

CSS:

 .wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;} .sliding_wrapper {overflow-y:scroll; overflow-x:none;} .sliding_wrapper, .wrap_body {height:45px;} .wrap_header, .wrap_body {overflow:hidden;} .column {width:100px; float:left; border:1px solid red;} .cell {width:100px; float:left; border:1px solid red;} /** * @info Clearfix: clear all the floated elements */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix {display:inline-table;} /** * @hack Display the Clearfix as a block element * @hackfor Every browser except IE for Macintosh */ /* Hides from IE-mac \*/ * html .clearfix {height:1%;} .clearfix {display:block;} /* End hide from IE-mac */ 

Spiegazione:

Hai un sliding wrapper che conterrà tutti i dati.

Nota quanto segue:

 .wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;} 

C’è una differenza di 17px perché dobbiamo prendere in considerazione la larghezza della barra di scorrimento.

Webkit sembra utilizzare internamente display: table-row-group per il tag tbody . Al momento c’è un bug con l’impostazione dell’altezza: https://github.com/w3c/csswg-drafts/issues/476

Speriamo che sarà risolto presto.

Nel mio caso volevo avere un’altezza retriggers del tavolo anziché un’altezza fissa in pixel, come mostrano le altre risposte. Per farlo ho usato la percentuale della proprietà di altezza visibile e l’overflow su div che contiene la tabella:

 &__table-container { height: 70vh; overflow: scroll; } 

In questo modo la tabella si espanderà insieme alla finestra che viene ridimensionata.