Bagaimana untuk Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak?

Jadual pengepala tetap dengan bar skrol mendatar dan bar skrol menegak dihidupkan

Masalah:

Mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak boleh mencabar apabila kedua-dua bar skrol diperlukan. Isu timbul apabila bekas luar diletakkan secara mutlak, yang boleh menyebabkan bar skrol menegak mengganggu pengepala, menghalangnya daripada dipasang di tempatnya.

HTML:

Struktur HTML adalah agak mudah:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

Gaya CSS meletakkan bekas luar secara mutlak dan mengendalikan kandungan yang melimpah:

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

Penyelesaian:

Kunci untuk menyelesaikan isu ini adalah dengan mengendalikan penatalan pengepala dan badan jadual dalam penyegerakan. Berikut ialah penyelesaian yang mungkin:

1. Tetapkan kedudukan .table-header kepada mutlak. Ini akan mengekalkan kedudukannya dalam .bekas dalam.
2. Tambahkan pendengar acara tatal pada .table-body.
3. Dalam pengendali acara, tetapkan offset kiri .table- pengepala kepada negatif kedudukan tatal mendatar .table-body. Ini akan menggerakkan pengepala bersama-sama dengan badan semasa ia menatal secara mendatar.

JavaScript/jQuery:

Skrip berikut boleh digunakan untuk melaksanakan penatalan penyegerakan:

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

Penjelasan:

Skrip ini memastikan bahawa apabila pengguna menatal .table-body secara mendatar, .table-header akan menatal bersamanya, mengekalkannya tetap kedudukan.

Nota:

Laraskan sifat ketinggian .table-body dalam CSS agar sepadan dengan ketinggian .table-header. Ini akan menghalang badan daripada melimpah ke pengepala.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!