Bagaimanakah Saya Menambah Bar Tatal pada Jadual HTML5 Saya?

Memasukkan Bar Tatal ke dalam Jadual HTML5

Untuk mendayakan bar skrol menegak dalam jadual HTML5, gunakan langkah di bawah.

1. Benamkan Kod Kawalan Tatal

Dalam CSS jadual, masukkan kod berikut untuk mendayakan tatal menegak:

table#my_table {
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
  overflow-y: scroll;
}

2. Hadkan Bar Skrol kepada Kandungan Kandungan

Jika jadual anda mempunyai pengepala, gunakan CSS berikut untuk menghalangnya daripada menatal:

table#my_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

3. Ketatkan Sempadan Bawah

Untuk meningkatkan pengalaman pengguna, laraskan sempadan bawah jadual:

table#my_table td, table#my_table th {
  border-bottom: 1px solid black;
}

4. Laraskan Tinggi dan Lebar Meja

Sesuaikan ketinggian dan lebar meja mengikut keperluan:

table#my_table {
  height: 500px;
  width: 750px;
}

5. Optimumkan Ketebalan Bar Tatal (Pilihan)

Untuk bar skrol yang lebih nipis, pertimbangkan untuk menggunakan sifat "-webkit-scrollbar-width":

table#my_table::-webkit-scrollbar {
  width: 10px;
}

Kesimpulan:

Mengikut langkah ini akan menambah bar skrol pada jadual HTML5 anda, membolehkan pengguna untuk menavigasi kandungannya dengan lancar.

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