Bagaimanakah Saya Boleh Mencipta Jadual dengan Pengepala Tetap dan Lajur Tetap Hanya Menggunakan CSS?

Jadual dengan Pengepala Tetap dan Lajur Tetap menggunakan CSS Tulen

Pengenalan:

Membuat jadual dengan pengepala tetap dan lajur pertama yang tetap boleh memberikan pengalaman pengguna yang stabil dan diperkemas untuk melihat set data atau jadual besar yang melangkaui viewport yang boleh dilihat. Secara tradisinya, JavaScript atau jQuery telah digunakan untuk tujuan ini. Walau bagaimanapun, ini boleh menghadapi masalah prestasi pada penyemak imbas mudah alih. Artikel ini meneroka penyelesaian CSS tulen untuk mencapai kefungsian ini sambil mengekalkan tatal lancar.

Menggunakan CSS Sticky Positioning:

Kedudukan CSS: sifat melekit membenarkan elemen melekat pada bahagian atas, sisi atau kedua-duanya apabila ditatal melepasi titik tertentu. Sifat ini boleh digunakan untuk mencapai pengepala tetap dan kesan lajur tetap.

Langkah:

1. Balut meja dalam bekas: Cipta bekas div untuk memegang meja.
2. Dayakan penatalan dalam bekas: Guna limpahan: tatal; ke elemen bekas.
3. Lekatkan pengepala ke atas: Letakkan baris pengepala (thead tr) menggunakan kedudukan: melekit dan atas: 0;.
4. Lekatkan lajur pertama ke sisi: Letakkan sel lajur pertama (tbody td:first-child or tbody th:first-child) menggunakan kedudukan: melekit dan kiri: 0;.
5. Gunakan penggayaan untuk menambah baik penampilan: Tingkatkan daya tarikan visual dengan menambahkan penggayaan untuk elemen jadual, pengepala dan lajur .

Tambahan Pertimbangan:

• Dimensi bekas: Pastikan bekas mempunyai ciri lebar maks dan ketinggian maks yang sesuai untuk mengehadkan penatalan.
• z -index: Gunakan z-index untuk mengawal susunan pertindihan melekit elemen.
• Sokongan penyemak imbas: Kedudukan: sifat melekit disokong dalam versi moden Chrome, Firefox dan Edge.

Contoh Kod:

.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody td, tbody th {
  padding: 0.5em;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

Kesimpulan:

Dengan menggunakan kedudukan melekit CSS, adalah mungkin untuk mencapai pengepala tetap dan kesan lajur pertama tetap dalam jadual tanpa menggunakan JavaScript. Penyelesaian ini menyediakan pendekatan berasaskan CSS tulen yang memastikan prestasi penatalan lancar, terutamanya pada penyemak imbas mudah alih.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Jadual dengan Pengepala Tetap dan Lajur Tetap Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!