Um das <tbody>Element scrollbar zu machen , müssen wir die Art und Weise ändern, wie es auf der Seite angezeigt wird, dh display: block;um es als Element auf Blockebene anzuzeigen.
Da wir die displayEigenschaft von tbodyändern, sollten wir diese Eigenschaft auch für das theadElement ändern, um zu verhindern, dass das Tabellenlayout beschädigt wird.
Also haben wir:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Web - Browser angezeigt werden, das theadund tbodyElemente als Zeilengruppe ( table-header-groupund table-row-group) standardmäßig.
Sobald wir das ändern, trfüllen die inneren Elemente nicht den gesamten Raum ihres Containers aus.
Um dies zu beheben, müssen wir die Breite der tbodySpalten berechnen und den entsprechenden Wert theadüber JavaScript auf die Spalten anwenden .
Spalten mit automatischer Breite
Hier ist die jQuery-Version der obigen Logik:
// 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]);
});
Und hier ist die Ausgabe (unter Windows 7 Chrome 32) :
ARBEITSDEMO .
Tabelle mit voller Breite, Spalten mit relativer Breite
Wenn das Originalposter benötigt wird, können wir den Container tableauf 100% erweitern widthund dann für jede Spalte der Tabelle einen relativen Wert ( Prozentsatz ) verwenden width.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Da die Tabelle ein (Art) flüssiges Layout hat , sollten wir die Breite der theadSpalten anpassen , wenn die Größe des Containers geändert wird.
Daher sollten wir die Breite der Spalten festlegen, sobald die Fenstergröße geändert wird:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Die Ausgabe wäre:
ARBEITSDEMO .
Browser-Unterstützung und Alternativen
Ich habe die beiden oben genannten Methoden unter Windows 7 über die neuen Versionen der wichtigsten Webbrowser (einschließlich IE10 +) getestet und es hat funktioniert.
Es ist jedoch nicht funktioniert richtig auf IE9 und unten.
Dies liegt daran, dass in einem Tabellenlayout alle Elemente denselben strukturellen Eigenschaften folgen sollten.
Durch die Verwendung von display: block;for <thead>und <tbody>Elementen haben wir die Tabellenstruktur gebrochen.
Layout über JavaScript neu gestalten
Ein Ansatz besteht darin, das (gesamte) Tabellenlayout neu zu gestalten. Verwenden Sie JavaScript, um im laufenden Betrieb ein neues Layout zu erstellen und die Breiten / Höhen der Zellen dynamisch zu handhaben und / oder anzupassen.
Schauen Sie sich zum Beispiel die folgenden Beispiele an:
Satztische
Dieser Ansatz verwendet zwei verschachtelte Tabellen mit einem enthaltenden div. Die erste tablehat nur eine Zelle mit einem div, und die zweite Tabelle befindet sich in diesem divElement.
Überprüfen Sie die vertikalen Bildlauftabellen bei CSS Play .
Dies funktioniert in den meisten Webbrowsern. Wir können die obige Logik auch dynamisch über JavaScript ausführen.
Tabelle mit fester Überschrift auf Bildlauf
Da der Zweck der vertikale Bildlaufleiste der Zugabe <tbody>wird die Tabelle anzeigt Header am Anfang jeder Zeile, könnten wir die Position des theadElements zu bleibenfixed am oberen Rand des Bildschirms statt.
Hier ist eine Arbeitsdemo dieses Ansatzes von Julien .
Es hat eine vielversprechende Webbrowser-Unterstützung.
Und hier eine reine CSS- Implementierung von Willem Van Bockstal .
Die reine CSS-Lösung
Hier ist die alte Antwort. Natürlich habe ich eine neue Methode hinzugefügt und die CSS-Deklarationen verfeinert.
Tabelle mit fester Breite
In diesem Fall tablesollte der Wert fest sein width (einschließlich der Summe der Spaltenbreiten und der Breite der vertikalen Bildlaufleiste). .
Jede Spalte sollte eine bestimmte haben Breite und die letzte Spalte des theadElements eine größere braucht Breite , die zu den anderen gleich Breite + die Breite der vertikalen Scroll-Leiste.
Daher wäre das CSS:
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 */
}
Hier ist die Ausgabe:
ARBEITSDEMO .
Tisch mit 100% Breite
Bei diesem Ansatz wird die table eine Breite von 100%und für jedes thund tdder Wert der widthEigenschaft sollte kleiner als sein 100% / number of cols.
Außerdem müssen wir die reduzieren Breite von theadals Wert der Breite der vertikalen Scroll-Leiste.
Dazu müssen wir CSS3 verwenden calc() Funktion wie folgt verwenden:
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;
}
Hier ist die Online-Demo .
Hinweis: Dieser Ansatz schlägt fehl schlägt wenn der Inhalt jeder Spalte die Zeile durchbricht, dh der Inhalt jeder Zelle sollte kurz genug sein .
Im Folgenden gibt es zwei einfache Beispiele für reine CSS-Lösungen, die ich zum Zeitpunkt der Beantwortung dieser Frage erstellt habe.
Hier ist das jsFiddle Demo v2 .
Alte Version: jsFiddle Demo v1
