


Bagaimana untuk Mencipta Pengepala Tetap dan Jadual Lajur Pertama Tetap Hanya Menggunakan CSS?
Cara Membuat Jadual dengan Pengepala Tetap dan Lajur Tetap Hanya Menggunakan CSS
Masalah
Dalam usaha untuk memaparkan data secara teratur , anda menyasarkan untuk mencipta jadual HTML yang menampilkan pengepala tetap dan lajur pertama tetap. Namun, penerokaan anda telah menemui pelbagai penyelesaian yang bergantung pada JavaScript atau jQuery, memperkenalkan potensi kelemahan pada penyemak imbas mudah alih disebabkan oleh tingkah laku menatal yang kurang ideal. Oleh itu, usaha anda kini tertumpu pada mencari penyelesaian CSS tulen.
Penyelesaian
Nasib baik, kedudukan: sifat melekit, disokong dalam versi moden Chrome, Firefox dan Edge, menawarkan cara untuk mencapai tingkah laku yang diingini. Anda boleh menggabungkannya dengan limpahan: sifat tatal untuk mencipta jadual dinamik dengan elemen pengepala dan lajur tetap.
Langkah
- Bekas: Mulakan dengan meletakkan jadual anda di dalam div induk dan menggunakan limpahan: tatal ke div, dengan itu membolehkan menatal.
- Kemelekatan Tajuk dan Lajur: Manfaatkan kedudukan: sifat melekit bersama-sama dengan nilai atas, kanan atau kiri untuk menentukan tepi mana elemen jadual harus dipatuhi.
- Kemelekatan Tajuk Lajur Pertama: Gunakan sifat thead th:first-child to pastikan pengepala lajur pertama kekal di tepi kiri.
Contoh
Penanda HTML:
<div class="container"> <table> <thead> <tr> <th></th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> </tr> </thead> <tbody> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> </tbody> </table> </div>
CSS:
div { max-width: 400px; max-height: 150px; overflow: scroll; } thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } tbody th { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; } thead th:first-child { left: 0; z-index: 2; } thead th { background: #000; color: #FFF; z-index: 1; } tbody th { background: #FFF; border-right: 1px solid #CCC; box-shadow: 1px 0 0 0 #ccc; } table { border-collapse: collapse; } td, th { padding: 0.5em; }
Pelaksanaan ini membolehkan anda menatal kedua-duanya menegak dan mendatar sambil mengekalkan pengepala dan lajur pertama pada tempatnya, memberikan pengalaman pengguna yang lebih baik untuk melihat data jadual.
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Tetap dan Jadual Lajur Pertama Tetap Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Dreamweaver CS6
Alat pembangunan web visual