Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencipta Jadual HTML dengan Bar Skrol Menegak dan Mendatar?

Bagaimanakah Saya Boleh Mencipta Jadual HTML dengan Bar Skrol Menegak dan Mendatar?

Susan Sarandon
Lepaskan: 2024-11-20 13:28:16
asal
654 orang telah melayarinya

How Can I Create HTML Tables with Both Vertical and Horizontal Scrollbars?

Mencapai Bar Tatal Menegak dan Mendatar dalam Jadual HTML

Mencipta jadual yang memerlukan penatalan menegak dan mendatar boleh menjadi mencabar. Begini cara untuk mencapai ini menggunakan CSS:


  1. Paparan sebagai Sekat: Tetapkan paparan: sekat untuk meja merawatnya seperti bekas.

  2. Dayakan Tatal Mendatar: Guna overflow-x: auto untuk mendayakan penatalan mendatar.

  3. Cegah Pemutus Talian: Gunakan white-space: nowrap untuk mengelakkan pemisah baris yang berlebihan dalam sel jadual.

Kod CSS berikut menunjukkan pendekatan ini:

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
Salin selepas log masuk

Contoh:

<table>
Salin selepas log masuk

Tambahan Pertimbangan:

  • Untuk memastikan pengedaran lebar sel, tambah jadual badan { paparan: jadual; lebar: 100%; } kepada CSS.
  • Rujuk sumber luaran untuk contoh yang lebih lanjut, seperti menatal kapsyen jadual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Jadual HTML dengan Bar Skrol Menegak dan Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan