Bagaimana untuk Mencipta Tajuk Tetap dan Jadual Lajur Hanya Menggunakan CSS?

Membuat Jadual dengan Pengepala dan Lajur Tetap Menggunakan CSS Tulen

Membetulkan Pengepala:

Untuk mencipta pengepala tetap tanpa menggunakan JavaScript, kedudukan: sifat melekit boleh digunakan. Sifat ini menyokong elemen melekat pada bahagian atas dan sisi dalam versi moden penyemak imbas Chrome, Firefox dan Edge.

Membetulkan Lajur Pertama:

Untuk membetulkan lajur pertama , kedudukan yang sama: sifat melekit boleh digunakan, tetapi dengan gaya kiri tambahan: 0 untuk memaksa elemen melekat pada sebelah kiri jadual.

Contoh Pelaksanaan:

1. Letakkan jadual di dalam bekas dengan limpahan: sifat tatal, yang membolehkan tatal dalam bekas.
2. Gunakan kedudukan: melekit; atas: 0; gaya pada elemen ke atas untuk melekatkan baris pengepala ke bahagian atas meja.
3. Tambah kedudukan: melekit; kiri: 0; kepada tbody th untuk membetulkan lajur pertama.
4. Untuk memastikan baris pengepala melekit kekal di atas semua elemen lain, tetapkan indeks-z: 1 pada ke atas.
5. Secara pilihan, tambahkan sempadan-kanan: 1px pepejal #CCC; dan bayang kotak: 1px 0 0 0 #ccc; to tbody th untuk mencontohi jidar pada lajur tetap.

Nota: Untuk memastikan persediaan ini berfungsi dengan betul, adalah penting untuk memberikan lebar maksimum dan ketinggian maksimum kepada bekas.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tajuk Tetap dan Jadual Lajur Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!