Bagaimana untuk Menambah Bar Tatal pada Jadual HTML5?

Cara Menambah Kebolehtatalan pada Jadual HTML5

Untuk menambah bar skrol pada jadual dengan hanya bilangan baris yang dipaparkan terhad, ikut langkah ini :

1. Takrifkan Struktur Jadual:

Buat jadual HTML5 asas dengan lajur dan baris yang diperlukan. Contohnya:

2. Tetapkan CSS Jadual:

Untuk menggayakan jadual, gunakan CSS untuk menentukan dimensi, warna dan penjajarannya. Contohnya:

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

3. Buat Bar Tatal:

Untuk menambah bar skrol, fokus pada badan jadual. Bahagian ini hendaklah dikonfigurasikan seperti berikut:

tbody {
    overflow: auto;
    height: 150px;
}

• limpahan: auto mendayakan tatal apabila kandungan jadual melebihi ketinggiannya.
• tinggi: 150px menetapkan ketinggian jadual yang boleh dilihat kepada 150 piksel, memastikan bahawa hanya beberapa baris dipaparkan pada a masa.

4. Kekalkan Penjajaran Lajur:

Jika jadual anda mempunyai baris pengepala, anda perlu memastikan ia kekal sejajar dengan badan utama semasa anda menatal. Ini boleh dicapai dengan membungkus kedua-dua elemen dalam kelas tableSection dan menggunakan CSS berikut:

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5. Laraskan Lebar Lajur (Pilihan):

Untuk memastikan semua lajur jadual mempunyai lebar yang sama, tanpa mengira kandungannya, anda boleh memasukkan CSS berikut:

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6. Alih keluar Bar Skrol daripada Pengepala (Pilihan):

Jika anda tidak mahu pengepala boleh ditatal, tambah peraturan CSS berikut:

table.tableSection thead {
    overflow: hidden;
}

7. Mengendalikan Kehadiran Bar Tatal (Pilihan):

Untuk melaraskan CSS anda secara dinamik berdasarkan kehadiran bar skrol, pertimbangkan untuk menggunakan JavaScript untuk mengesan kewujudannya dan menggunakan gaya yang diperlukan.

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!