Bagaimana untuk Menambah Bar Tatal pada Jadual HTML5?

Mencipta Bar Tatal dalam Jadual HTML5

Untuk meningkatkan pengalaman pengguna apabila melihat jadual yang panjang, menambah bar skrol menyediakan cara yang mudah untuk menavigasi kandungannya. Berikut ialah panduan langkah demi langkah tentang cara untuk memasukkan bar skrol ke dalam jadual HTML5:

Struktur HTML:

Encapsulate data jadual anda dalam elemen jadual dengan ID untuk rujukan dan penggayaan yang mudah. Anda juga boleh menentukan baris jadual () dan sel data () mengikut keperluan.

Penggayaan CSS:

1. table.tableBahagian {

   a. Tetapkan sifat paparan kepada "jadual" untuk menyusun data jadual dalam bentuk jadual.
   b. Tentukan lebar sebagai peratusan atau nilai tetap untuk mengawal keseluruhan lebar jadual.

2. table.tableSection thead, table.tableSection tbody {

   a. Tetapkan sifat apungan kepada "kiri" untuk membenarkan bahagian pengepala (kepala) dan badan (badan) muncul bersebelahan.
   b. Tetapkan lebar sebagai peratusan lebar jadual untuk memastikan ia menduduki keseluruhan lebar.

3. table.tableSection tbody {

   a. Tetapkan sifat limpahan kepada "auto" untuk mendayakan tatal menegak apabila kandungan melebihi ketinggian yang tersedia.
   b. Tentukan ketinggian untuk menentukan kawasan yang boleh dilihat pada badan meja.

4. table.tableSection tr {

   a. Tetapkan lebar sebagai peratusan lebar jadual untuk mengawal lebar setiap baris.
   b. Tetapkan sifat paparan kepada "jadual" untuk menyusun sel dalam setiap baris.

5. table.tableSection th, table.tableSection td {

   a. Tetapkan lebar sebagai peratusan lebar jadual untuk menentukan lebar setiap sel.

Pertimbangan Tambahan:

• Jika anda jadual mengandungi baris pengepala, anda mungkin perlu mengendalikan jarak antara sel pengepala dan sel badan menggunakan CSS atau JavaScript.
• Untuk menghalang baris pengepala daripada menatal keluar daripada paparan, pertimbangkan untuk menggunakan sifat CSS3 seperti calc atau position:sticky untuk mengekalkan keterlihatannya.
• Sebagai alternatif, anda boleh mengesan kehadiran bar skrol menggunakan JavaScript dan gunakan penggayaan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Bar Tatal pada Jadual HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!