Bagaimana untuk Menambah Bar Tatal Mendatar (dan Menegak) pada Jadual HTML?

Cara Menambah Bar Tatal Mendatar pada Jadual HTML

Soalan ini meneroka cabaran untuk menambah bar skrol mendatar dan menegak pada jadual HTML, pada mulanya menghadapi kesukaran dalam memaparkan sama ada bar skrol.

Untuk mencapai ini, ikuti langkah yang digariskan dalam yang disediakan jawapan:

Pertama sekali, ubah suai CSS jadual dengan menetapkan paparan: blok, yang membolehkan penatalan mendatar. Kemudian, tambah limpahan-x: auto untuk mendayakan penatalan mendatar automatik. Ini harus memastikan bahawa jadual menatal secara mendatar apabila kandungannya melebihi lebar yang tersedia.

Coretan kod yang disediakan untuk penyelesaian ini termasuk:

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

CSS ini dengan berkesan membenarkan penatalan mendatar sambil menghalang baris pecah dalam sel jadual, memastikan paparan yang bersih dan ringkas.

Selain itu, jawapannya memberikan contoh yang lebih terlibat tentang menatal kapsyen jadual, mempamerkan pelbagai teknik CSS untuk mencapai tingkah laku yang diingini. Untuk menangani isu sel jadual tidak mengisi keseluruhan jadual, jawapannya mencadangkan penambahan kod CSS:

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

Dengan melaksanakan konfigurasi CSS ini, anda boleh mencipta jadual HTML yang menyokong penatalan mendatar dan menegak, menampung pelbagai saiz meja dan kandungan dengan berkesan.

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