Bagaimanakah Saya Boleh Mencipta Bar Tatal Mendatar Pendua di Bahagian Atas Jadual?

Pendua Bar Tatal Mendatar di Atas dan Bawah Jadual

Mencipta bar skrol mendatar di bahagian bawah jadual ialah keperluan biasa untuk jadual dengan lebar yang berlebihan. Walau bagaimanapun, mereplikasi bar skrol di bahagian atas memerlukan pendekatan yang lebih inovatif.

Untuk mensimulasikan bar skrol mendatar kedua di bahagian atas, penyelesaiannya melibatkan mencipta div "dummy" di atas jadual asal. Div dummy ini mempunyai bar skrol mendatar dan bersaiz tepat untuk meniru lebar bar skrol asal.

Seterusnya, pengendali acara dilampirkan pada kedua-dua div dummy dan jadual asal untuk menyegerakkan gelagat menatal mereka. Apabila salah satu bar skrol dialihkan, yang lain dikemas kini untuk mengekalkan penjajaran. Kesannya ialah bar skrol mendatar kedua di bahagian atas jadual.

Kod berikut menggambarkan teknik ini:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

CSS:

<code class="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;
}</code>

JavaScript:

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Dengan menggabungkan teknik ini, pembangun boleh mencipta bar skrol mendatar pendua dengan berkesan di bahagian atas jadual menggunakan HTML, CSS dan JavaScript semata-mata.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bar Tatal Mendatar Pendua di Bahagian Atas Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!