Bagaimana untuk Mencipta Bar Skrol Mendatar di Kedua-dua Atas dan Bawah Jadual dalam HTML dan CSS?

Barbara Streisand
Lepaskan: 2024-10-30 15:53:02
asal
468 orang telah melayarinya

How to Create Horizontal Scrollbars at Both Top and Bottom of a Table in HTML and CSS?

Cara Meletakkan Bar Tatal Mendatar pada Kedua-dua Bahagian Atas dan Bawah Jadual dalam HTML dan CSS

Untuk menangani keperluan untuk bar skrol mendatar pada kedua-dua bahagian atas dan bawah jadual besar, ia tidak boleh langsung menggunakan HTML dan CSS sahaja. Walau bagaimanapun, penyelesaian yang berkesan wujud untuk mensimulasikan kehadiran dua bar skrol.

Caranya ialah meletakkan div "dummy" di atas meja, memberikan ketinggian yang cukup untuk memuatkan bar skrol mendatar. Div dummy ini akan berfungsi sebagai bar skrol "kedua".

Untuk mengekalkan penyegerakan antara div dummy dan jadual sebenar, pengendali acara dilampirkan pada kedua-dua elemen. Apabila bar skrol bagi mana-mana elemen dialihkan, elemen lain dikemas kini dengan sewajarnya, memastikan kedua-dua bar skrol kekal segerak.

Untuk demonstrasi interaktif, rujuk biola yang disediakan:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>
Salin selepas log masuk
<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>
Salin selepas log masuk
<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>
Salin selepas log masuk

Dengan menggunakan teknik ini, anda boleh meniru kehadiran bar skrol mendatar dengan berkesan pada kedua-dua bahagian atas dan bawah jadual anda, membolehkan navigasi yang mudah untuk pengguna anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Skrol Mendatar di Kedua-dua Atas dan Bawah Jadual dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!