Untuk membuat <tbody>elemen dapat digulir, kita perlu mengubah cara itu ditampilkan pada halaman yaitu menggunakan display: block;untuk menampilkan itu sebagai elemen tingkat blok.
Karena kita mengubah displayproperti tbody, kita harus mengubah properti itu untuk theadelemen juga untuk mencegah dari melanggar tata letak tabel.
Jadi kita punya:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Browser web menampilkan theaddan tbodyelemen sebagai grup baris ( table-header-groupdan table-row-group) secara default.
Setelah kami mengubahnya, trelemen di dalamnya tidak mengisi seluruh ruang wadah mereka.
Untuk memperbaikinya, kita harus menghitung lebar tbodykolom dan menerapkan nilai yang sesuai ke theadkolom melalui JavaScript.
Kolom Lebar Otomatis
Berikut ini adalah versi jQuery dari logika di atas:
// 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]);
});
Dan inilah outputnya (pada Windows 7 Chrome 32) :
DEMO KERJA .
Tabel Lebar Penuh, Kolom Lebar Relatif
Seperti yang dibutuhkan Poster Asli, kami dapat memperluas tablehingga 100% dari widthwadahnya, dan kemudian menggunakan relatif ( Persentase ) widthuntuk setiap kolom tabel.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Karena tabel memiliki (semacam) tata letak fluida , kita harus menyesuaikan lebar theadkolom ketika ukuran wadah.
Karena itu kita harus mengatur lebar kolom setelah jendela diubah ukurannya:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Outputnya adalah:
DEMO KERJA .
Dukungan dan Alternatif Peramban
Saya telah menguji dua metode di atas pada Windows 7 melalui versi baru Browser Web utama (termasuk IE10 +) dan berhasil.
Namun, itu tidak berfungsi dengan baik pada IE9 dan di bawah.
Itu karena dalam tata letak tabel , semua elemen harus mengikuti sifat struktural yang sama.
Dengan menggunakan display: block;untuk <thead>dan <tbody>elemen, kita sudah rusak struktur tabel.
Mendesain ulang tata letak melalui JavaScript
Salah satu pendekatan adalah mendesain ulang tata letak tabel (keseluruhan). Menggunakan JavaScript untuk membuat tata letak baru dengan cepat dan menangani dan / atau menyesuaikan lebar / tinggi sel secara dinamis.
Sebagai contoh, lihat contoh berikut:
Meja bersarang
Pendekatan ini menggunakan dua tabel bersarang dengan div yang berisi. Yang pertama tablehanya memiliki satu sel yang memiliki div, dan tabel kedua ditempatkan di dalam divelemen itu.
Periksa tabel gulir Vertikal di Play CSS .
Ini berfungsi pada sebagian besar browser web. Kami juga dapat melakukan logika di atas secara dinamis melalui JavaScript.
Tabel dengan tajuk tetap pada gulir
Karena tujuan menambahkan scroll bar vertikal ke <tbody>yang menampilkan tabel sundulan di bagian atas setiap baris, kita bisa memposisikan satu theadelemen untuk tinggal fixeddi bagian atas layar sebagai gantinya.
Berikut adalah Demo Kerja dari pendekatan ini yang dilakukan oleh Julien .
Ini memiliki dukungan browser web yang menjanjikan.
Dan di sini sebuah CSS murni implementasi oleh Willem Van Bockstal .
Solusi CSS Murni
Inilah jawaban lama. Tentu saja saya telah menambahkan metode baru dan memperhalus deklarasi CSS.
Tabel dengan Lebar Tetap
Dalam hal ini, tableharus memiliki tetap width (termasuk jumlah lebar kolom dan lebar bilah gulir vertikal) .
Setiap kolom harus memiliki spesifik lebar dan kolom terakhir dari theadelemen membutuhkan lebih lebar yang sama dengan yang lain width + yang lebar dari scroll-bar vertikal.
Karenanya, CSS adalah:
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 */
}
Berikut hasilnya:
DEMO KERJA .
Meja dengan Lebar 100%
Dalam pendekatan ini, tablememiliki lebar 100%dan untuk masing-masing thdan td, nilai widthproperti harus kurang dari 100% / number of cols.
Juga, kita perlu mengurangi lebar dari theadsebagai nilai lebar dari scroll-bar vertikal.
Untuk melakukan itu, kita perlu menggunakan calc()fungsi CSS3 , sebagai berikut:
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;
}
Ini Demo Online .
Catatan: Pendekatan ini akan gagal jika konten masing-masing kolom melanggar garis, yaitu konten setiap sel harus cukup pendek .
Berikut ini, ada dua contoh sederhana dari solusi CSS murni yang saya buat pada saat saya menjawab pertanyaan ini.
Ini adalah Demo jsFiddle v2 .
Versi lama: jsFiddle Demo v1
