Bagaimana untuk Menambah Tatal Mendatar pada Jadual HTML?

Memperluaskan Jadual HTML dengan Tatal Mendatar

Apabila berurusan dengan jadual data yang luas, adalah perlu untuk meningkatkan pengalaman pengguna dengan menyediakan kedua-dua menegak dan keupayaan menatal mendatar. Artikel ini membincangkan cara menambah bar skrol mendatar pada jadual HTML, memastikan navigasi lancar tanpa mengira saiz kandungan jadual.

Menambah Bar skrol Mendatar

Untuk mencapai penatalan mendatar , ikuti langkah berikut:

1. Paparkan jadual sebagai blok: Tetapkan sifat paparan elemen untuk disekat. Ini membolehkan jadual untuk mengisi lebar penuh bekasnya.
2. Dayakan penatalan mendatar: Gunakan sifat limpahan-x dan tetapkannya kepada auto. Ini mengarahkan penyemak imbas untuk memaparkan bar skrol mendatar apabila kandungan jadual melebihi lebar yang tersedia.

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

Pertimbangan Tambahan

• Untuk memastikan bahawa sel mengisi seluruh jadual, tambah kod berikut pada anda CSS:

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

• Untuk tingkah laku menatal yang lebih lanjut, rujuk sumber ini: [Kapsyen Jadual Menatal](https://www.lizkeogh.com/html-table-caption- tatal-tanpa-terapung/).

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