Meja dengan kedua -dua tajuk melekit dan lajur pertama yang melekit

Kami telah meneroka bagaimana sel meja individu (<th> dan<code><td> ) boleh menggunakan <code>position: sticky . Mewujudkan tajuk meja melekit adalah mudah, memastikan ia kelihatan semasa menatal melalui banyak baris. Walau bagaimanapun, keletihan melangkaui menatal menegak; Stickiness mendatar sama -sama berguna. Kita juga boleh mempunyai pelbagai elemen melekit dalam satu jadual, masing -masing melekat dalam arah yang berbeza, atau bahkan satu elemen melekat dalam pelbagai arah.

Video ini menunjukkan jadual dengan kedua -dua header melekit dan lajur pertama yang melekit: [Asumsikan pautan video di sini - Gantikan dengan pautan video sebenar jika tersedia]

Faedah utama? Rujukan silang yang dipertingkatkan dalam data jadual. Bayangkan meja skor besbol dengan banyak pasukan; Menjaga nama pasukan dan nombor inning yang kelihatan menghalang kehilangan konteks semasa menatal.

Tidak semua jadual memerlukan rujukan silang dua arah. Ramai yang mendapat manfaat daripada runtuh pada skrin yang lebih kecil.

Cabarannya terletak pada menguruskan elemen bertindih. Sel-sel melekit memerlukan latar belakang untuk mengelakkan kandungan yang berdarah dan pengurusan z-index yang berhati-hati untuk memastikan lapisan yang betul apabila tersekat. Kuncinya adalah berlapis:

• tbody > th mestilah melebihi sel biasa untuk kestabilan tatal mendatar.
• thead > th sel mestilah di atas tbody > th sel untuk kestabilan tatal menegak.
• thead > th:first-child mesti mempunyai z-index tertinggi, tinggal di atas kedua-dua sel badan dan tajuk saudara semasa menatal mendatar.

Ia adalah teka -teki yang kompleks, tetapi boleh dicapai.

Terima kasih kepada Cameron Clark untuk demo awal dan Estelle Weyl untuk pelaksanaannya yang lebih awal-bukti pendekatan pemikiran Estelle.

Atas ialah kandungan terperinci Meja dengan kedua -dua tajuk melekit dan lajur pertama yang melekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!