Aby umożliwić <tbody>przewijanie elementu, musimy zmienić sposób jego wyświetlania na stronie, np. Używając go display: block;do wyświetlania jako elementu na poziomie bloku.
Ponieważ zmieniamy displaywłaściwość tbody, powinniśmy również zmienić tę właściwość dla theadelementu, aby zapobiec uszkodzeniu układu tabeli.
Więc mamy:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Przeglądarki internetowe domyślnie wyświetlają elementy theadi tbodyjako grupę wierszy ( table-header-groupi table-row-group).
Gdy to zmienimy, trelementy wewnętrzne nie zajmują całej przestrzeni pojemnika.
Aby to naprawić, musimy obliczyć szerokość tbodykolumn i zastosować odpowiednią wartość do theadkolumn za pomocą JavaScript.
Automatyczne kolumny szerokości
Oto wersja powyższej logiki jQuery:
// 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]);
});
A oto dane wyjściowe (w systemie Windows 7 Chrome 32) :
DEMO ROBOCZE .
Tabela pełnej szerokości, kolumny o względnej szerokości
W miarę potrzeby Plakat oryginalny możemy rozszerzyć tabledo 100% widthjego kontenera, a następnie użyć wartości względnej ( Procent ) widthdla każdej kolumny tabeli.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Ponieważ tabela ma (w pewnym sensie) układ płynów , powinniśmy dostosować szerokość theadkolumn przy zmianie rozmiaru pojemnika.
Dlatego po zmianie rozmiaru okna powinniśmy ustawić szerokość kolumn:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Dane wyjściowe będą:
DEMO ROBOCZE .
Obsługa przeglądarki i alternatywy
Testowałem dwie powyższe metody w systemie Windows 7 za pomocą nowych wersji głównych przeglądarek internetowych (w tym IE10 +) i działało.
Jednak nie działa poprawnie na IE9 i niższych.
Jest tak, ponieważ w układzie tabeli wszystkie elementy powinny mieć te same właściwości strukturalne.
Poprzez zastosowanie display: block;dla <thead>i <tbody>elementów, mamy złamane strukturę tabeli.
Przeprojektowanie układu za pomocą JavaScript
Jednym z podejść jest przeprojektowanie (całego) układu tabeli. Korzystanie z JavaScript do tworzenia nowego układu w locie oraz dynamiczne obsługiwanie i / lub dostosowywanie szerokości / wysokości komórek.
Na przykład spójrz na następujące przykłady:
Tabele zagnieżdżone
To podejście wykorzystuje dwie zagnieżdżone tabele z zawierającym div. Pierwsza tablema tylko jedną komórkę, która ma div, a druga tabela jest umieszczona wewnątrz tego divelementu.
Sprawdź pionowe tabele przewijania w CSS Play .
Działa to w większości przeglądarek internetowych. Powyższą logikę możemy również wykonać dynamicznie za pomocą JavaScript.
Tabela ze stałym nagłówkiem przy przewijaniu
Ponieważ w celu dodania pionowy pasek przewijania do <tbody>jest wyświetlający tabeli nagłówek na górze każdego wiersza, moglibyśmy umieścić ten theadelement, do pobytu fixedw górnej części ekranu, zamiast.
Oto robocza demonstracja tego podejścia wykonana przez Juliena .
Ma obiecującą obsługę przeglądarki internetowej.
I tutaj czystym CSS wdrożenie przez Willem Van Bockstal .
Rozwiązanie Pure CSS
Oto stara odpowiedź. Oczywiście dodałem nową metodę i dopracowałem deklaracje CSS.
Tabela ze stałą szerokością
W takim przypadku tablepowinien mieć stały width (w tym sumę szerokości kolumn i szerokość pionowego paska przewijania) .
Każda kolumna powinna mieć swoisty szerokość i ostatnia kolumna z theadelementu potrzebuje większą szerokość , która jest równa innych width + szerokości pionowego przewijania bar.
Dlatego CSS byłby:
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 */
}
Oto wynik:
DEMO ROBOCZE .
Stół o 100% szerokości
W tym podejściu, tablema szerokość 100%i dla każdego th, a tdwartość widthnieruchomości powinna być mniejsza niż 100% / number of cols.
Ponadto, musimy zmniejszyć szerokość od theadjak wartość szerokości pionowego przewijania bar.
Aby to zrobić, musimy użyć calc()funkcji CSS3 w następujący sposób:
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;
}
Oto demo online .
Uwaga: Podejście to nie powiedzie się, jeśli zawartość każdej kolumny łamie linię, tj . Zawartość każdej komórki powinna być wystarczająco krótka .
Poniżej znajdują się dwa proste przykłady czystego rozwiązania CSS, które stworzyłem w momencie, gdy odpowiedziałem na to pytanie.
Oto jsFiddle Demo v2 .
Stara wersja: jsFiddle Demo v1
