Bagaimanakah Saya Boleh Membuat Jadual HTML Boleh Ditatal Secara Mendatar?

Mencapai Jadual HTML Boleh Tatal: Panduan untuk Bar Tatal Mendatar

Menambah kedua-dua bar skrol menegak dan mendatar pada jadual HTML pada mulanya boleh kelihatan sukar difahami. Walau bagaimanapun, dengan memahami gaya CSS asas, ia menjadi satu proses yang mudah.

Menjadikan Jadual Boleh Ditatal Secara Mendatar

Untuk mendayakan penatalan mendatar, langkah berikut adalah penting:

1. Tetapkan 'paparan: blok;' pada Jadual: Ini memastikan bahawa jadual berkelakuan sebagai elemen peringkat blok, membenarkannya memecah garisan jika perlu.
2. Gunakan 'overflow-x: auto;' ke Jadual: Ini mengaktifkan penampilan automatik bar skrol mendatar apabila kandungan jadual melebihi lebar mendatarnya.

Berikut ialah contoh:

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

Tambahan Pertimbangan

1. Ketinggian Sel Tidak Padan: Kadangkala, sel jadual mungkin tidak mengisi jadual sepenuhnya, memerlukan CSS tambahan berikut:

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

2. Kapsyen Jadual Menatal: Untuk senario yang lebih kompleks melibatkan kapsyen jadual menatal, pertimbangkan contoh komprehensif yang disediakan dalam halaman web yang dirujuk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Jadual HTML Boleh Ditatal Secara Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!