Bagaimana untuk Melaksanakan Tatal Menegak dan Mendatar dalam Jadual HTML?

Menatal Jadual HTML: Mempertingkatkan Kedua-dua Navigasi Menegak dan Mendatar

Menambah bar skrol pada jadual HTML adalah penting untuk mengurus set data yang besar. Artikel ini akan membimbing anda melalui proses mendayakan kedua-dua penatal menegak dan mendatar untuk meningkatkan pengalaman pengguna.

Tatal Menegak

Untuk menambah bar skrol menegak, adalah penting untuk menetapkan jadual anda untuk dipaparkan terlebih dahulu: blok. Seterusnya, nyatakan bahawa ia harus melimpah secara menegak. Laksanakan perubahan ini dengan CSS berikut:

table {
    display: block;
    overflow-y: auto;
    white-space: nowrap;
}

Tatal Mendatar

Untuk mendayakan tatal mendatar, gunakan sifat auto limpahan-x: pada jadual anda. Kod ini sepatutnya menyerupai ini:

table {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

Ini akan menambah kedua-dua bar skrol mendatar dan menegak pada jadual anda dengan berkesan, meningkatkan interaksi pengguna dengan set data yang besar. Selain itu, pendekatan ini memastikan pengalaman menatal yang lancar dengan pemformatan tambahan yang minimum.

Pilihan Terperinci

Jika anda menghadapi masalah dengan sel tidak mengisi keseluruhan jadual secara mendatar, cuba tambah peraturan CSS berikut:

table tbody {
    display: table;
    width: 100%;
}

Ini akan memastikan sel meja meregang agar sesuai dengan ruang mendatar yang tersedia.

Dengan mengikuti langkah ini, anda boleh menambahkan bar skrol pada jadual HTML anda dengan mudah, meningkatkan antara muka pengguna dengan sangat baik apabila berurusan dengan set data yang besar.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Tatal Menegak dan Mendatar dalam Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!