Bagaimana untuk Menambah Bar Skrol pada Jadual HTML5?

Mengintegrasikan Bar Skrol ke dalam Jadual HTML5: Panduan Komprehensif

Dalam HTML5, meningkatkan kefungsian jadual telah menjadi penting untuk mengurus set data yang besar. Satu peningkatan sedemikian ialah menambahkan bar skrol untuk membolehkan pengguna menavigasi kandungan yang luas dengan mudah.

Langkah 1: Menentukan Struktur Jadual

Mulakan dengan menentukan struktur jadual anda dalam HTML5 seperti berikut:

<table>

Jadual terdiri daripada dua bahagian: kepala () mengandungi tajuk jadual dan badan () yang memegang baris data.

Langkah 2: Menggayakan Jadual

Seterusnya, tambah penggayaan CSS untuk meningkatkan penampilan jadual dan menyediakan yang boleh disesuaikan bar skrol:

#my_table {
  /* General table styling */
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
}

#my_table thead, #my_table tbody {
  /* Separate styling for the table sections */
  display: table;
  width: 100%;
}

#my_table tbody {
  /* Styling for the body, including scrollbar */
  overflow: auto;
  height: 150px;
}

#my_table tr {
  /* Styling for individual rows */
  width: 100%;
  display: table;
  text-align: left;
}

#my_table th, #my_table td {
  /* Styling for table cells */
  width: 33%;
}

CSS ini memastikan jadual muat dalam lebar yang dipratentukan, mempunyai jidar bulat dan mempunyai bar skrol di bahagian badan.

Langkah 3: Tambahan Pertimbangan (Pilihan)

Untuk kawalan yang dipertingkatkan, anda boleh menghalang penatalan tajuk jadual dengan menambah padding-kanan pada bahagian, mengambil kira lebar bar skrol.

#my_table thead {
  padding-right: 18px;
  width: calc(100% - 18px);
}

Kesimpulan

Dengan mengikuti langkah ini, anda boleh menyepadukan bar skrol ke dalam jadual HTML5 anda dengan mudah, memastikan optimum pengalaman pengguna semasa menavigasi set data yang luas.

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