Bagaimanakah Saya Boleh Mencipta Bar Tatal Dwi Mendatar untuk Jadual Besar Hanya Menggunakan HTML, CSS dan JavaScript?

Bar Tatal Dwi Mendatar untuk Jadual Mammoth

Untuk memuatkan jadual yang luas, mendayakan tatal mendatar di kedua-dua bahagian atas dan bawah boleh meningkatkan kebolehcapaian pengguna. Nasib baik, ini boleh dicapai semata-mata dengan HTML dan CSS. Begini caranya:

Mensimulasikan Bar Tatal Atas

Buat div "dummy" di atas jadual dengan menatal mendatar. Tetapkan ketinggiannya cukup untuk memuatkan bar skrol. Elemen dummy ini akan mensimulasikan penampilan bar skrol tambahan di atas.

Menyegerakkan Acara Tatal

Lampirkan pengendali acara skrol pada kedua-dua div dummy dan jadual sebenar. Apabila salah satu bar skrol dialihkan, elemen lain harus bergerak secara segerak. Ini mewujudkan ilusi mempunyai dua bar skrol mendatar bebas.

Coretan Kod

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 { height: 20px; }
.wrapper2 { height: 200px; }
.div1 { width: 1000px; height: 20px; }
.div2 { width: 1000px; height: 200px; background-color: #88FF88; overflow: auto; }

JS:

$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Dengan kod ini, anda boleh memberikan pengguna anda bar skrol dwi mendatar, menjadikannya lebih mudah untuk menavigasi jadual lebar walaupun pada halaman lanjutan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bar Tatal Dwi Mendatar untuk Jadual Besar Hanya Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!