Bolehkah saya Menambah Bar Skrol Mendatar Pendua (Atas dan Bawah) pada Jadual Menggunakan HTML dan CSS Sahaja?

Cara Menambah Bar Tatal Mendatar di Atas dan Bawah Jadual

Dalam senario di mana jadual melangkaui had skrin, ia menjadi penting untuk memasukkan bar skrol mendatar untuk menavigasi kandungannya dengan mudah. Walau bagaimanapun, keperluan biasa timbul di mana pengguna lebih suka mempunyai bar skrol ini di bahagian atas dan bawah jadual untuk penatalan yang lancar. Adakah mungkin untuk mencapai ini hanya melalui HTML dan CSS?

Jawapannya ialah ya. Untuk mensimulasikan bar skrol dwi mendatar, div "dummy" diletakkan di atas elemen jadual sebenar, dengan ketinggian hanya mencukupi untuk menampung bar skrol. Pengendali acara kemudiannya dilampirkan pada kedua-dua div dummy dan jadual, memastikan bahawa menatal sama ada bar skrol menyegerakkan elemen lain.

Untuk demonstrasi praktikal, rujuk perkara berikut contoh:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </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());
  });
});

Teknik ini berkesan mencipta ilusi bar skrol mendatar kedua, memberikan pengalaman menatal yang mudah dan intuitif di bahagian atas dan bawah jadual.

Atas ialah kandungan terperinci Bolehkah saya Menambah Bar Skrol Mendatar Pendua (Atas dan Bawah) pada Jadual Menggunakan HTML dan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!