Al fine di rendere <tbody>scorrevole l'elemento, dobbiamo cambiare il modo in cui viene visualizzato sulla pagina, ad esempio usando display: block;per visualizzarlo come elemento a livello di blocco.
Dato che cambiamo la displayproprietà di tbody, dovremmo cambiare anche quella proprietà per theadelement per evitare di rompere il layout della tabella.
Quindi abbiamo:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
I browser Web visualizzano gli elementi theade tbodycome gruppo di righe ( table-header-groupe table-row-group) per impostazione predefinita.
Una volta che lo cambiamo, gli trelementi interni non riempiono l'intero spazio del loro contenitore.
Per risolvere questo problema, dobbiamo calcolare la larghezza delle tbodycolonne e applicare il valore corrispondente athead colonne tramite JavaScript.
Colonne di larghezza automatica
Ecco la versione jQuery della logica sopra:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
Ed ecco l'output (su Windows 7 Chrome 32) :
DEMO DI LAVORO .
Tabella a larghezza piena, colonne a larghezza relativa
In base alle necessità del poster originale, è possibile espandere il table100% del widthsuo contenitore e quindi utilizzare un relativo ( percentuale ) widthper ogni colonna della tabella.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Poiché la tabella ha una ( fluida ) disposizione del layout , dovremmo regolare la larghezza delle theadcolonne quando il contenitore viene ridimensionato.
Quindi dovremmo impostare le larghezze delle colonne una volta ridimensionata la finestra:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
L'output sarebbe:
DEMO DI LAVORO .
Supporto browser e alternative
Ho testato i due metodi sopra su Windows 7 tramite le nuove versioni dei principali browser Web (incluso IE10 +) e ha funzionato.
Tuttavia, non funziona correttamente su IE9 e versioni precedenti .
Questo perché in un layout di tabella , tutti gli elementi dovrebbero seguire le stesse proprietà strutturali.
Usando display: block;per gli elementi <thead>e <tbody>, abbiamo rotto la struttura della tabella.
Riprogettare il layout tramite JavaScript
Un approccio consiste nel ridisegnare il layout (intero) della tabella. Utilizzando JavaScript per creare un nuovo layout al volo e gestire e / o regolare le larghezze / altezze delle celle in modo dinamico.
Ad esempio, dai un'occhiata ai seguenti esempi:
Tavoli a incastro
Questo approccio utilizza due tabelle nidificate con un div contenente. Il primo tableha solo una cella che ha un div, e la seconda tabella è posizionata all'interno di divquell'elemento.
Controlla le tabelle di scorrimento verticale su CSS Play .
Funziona sulla maggior parte dei browser Web. Possiamo anche fare la logica di cui sopra dinamicamente tramite JavaScript.
Tabella con intestazione fissa su scroll
Poiché lo scopo dell'aggiunta della barra di scorrimento verticale alla <tbody>visualizzazione dell'intestazione della tabella nella parte superiore di ogni riga, è possibile posizionare l' theadelemento in modo che rimangafixed nella parte superiore dello schermo.
Ecco una demo funzionante di questo approccio eseguito da Julien .
Ha un promettente supporto per browser web.
E qui una pura implementazione CSS di Willem Van Bockstal .
La soluzione CSS pura
Ecco la vecchia risposta. Naturalmente ho aggiunto un nuovo metodo e perfezionato le dichiarazioni CSS.
Tavolo con larghezza fissa
In questo caso, tabledovrebbe avere un valore fisso width (inclusa la somma delle larghezze delle colonne e la larghezza della barra di scorrimento verticale) .
Ogni colonna deve avere una determinata larghezza e l' ultima colonna di theadelemento ha bisogno di una maggiore larghezza pari ad altrui larghezza + la larghezza della barra di scorrimento verticale.
Pertanto, il CSS sarebbe:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Ecco l'output:
DEMO DI LAVORO .
Tavolo con larghezza 100%
In questo approccio, tableha una larghezza di 100%e per ciascuno the td, il valore della widthproprietà dovrebbe essere inferiore a 100% / number of cols.
Inoltre, dobbiamo ridurre la larghezza di theadcome valore della larghezza della barra di scorrimento verticale.
Per fare ciò, dobbiamo usare la calc()funzione CSS3 , come segue:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
Ecco la demo online .
Nota: questo approccio fallirà se il contenuto di ogni colonna interrompe la linea, ovvero il contenuto di ogni cella dovrebbe essere abbastanza breve .
Di seguito, ci sono due semplici esempi di soluzione CSS pura che ho creato nel momento in cui ho risposto a questa domanda.
Ecco la jsFiddle Demo v2 .
Vecchia versione: jsFiddle Demo v1
