Mencipta Jadual Boleh Tatal dengan Pengepala Melekit dan Lajur Beku Menggunakan HTML dan CSS

Jadual adalah asas dalam aplikasi web untuk memaparkan data berstruktur. Menambah ciri seperti pengepala boleh tatal dan lajur beku (melekit) boleh menjadikan jadual lebih mesra pengguna. Dalam artikel ini, kami akan meneroka cara membuat jadual dengan pengepala melekit dan lajur kiri beku menggunakan HTML dan CSS tulen.

Contoh CodePen

Untuk melihat kod dalam tindakan, lihat contoh langsung ini di CodePen:
Contoh kod ini menggunakan kelas JS untuk membuat jadual. Anda boleh meniru ini dengan mana-mana rangka kerja atau pustaka pilihan anda.

Ciri-ciri Utama Jadual

• Pengepala Melekit: Pengepala jadual kekal kelihatan di bahagian atas apabila menatal secara menegak.
• Lajur Kiri Beku: Lajur pertama kekal semasa anda menatal secara mendatar.
• Kandungan Boleh Tatal: Tatal menegak dan mendatar disokong.
• Gaya Boleh Disesuaikan: Reka bentuk meja bersih dan moden, dengan jaluran zebra dan kesan hover.

Struktur HTML

Kami menggunakan struktur jadual ringkas dengan untuk pengepala dan untuk barisan. Jadual dibalut dalam div untuk kebolehscrollan. Ini kodnya:

<div>



<h2>
  
  
  CSS for Sticky Header and Frozen Column
</h2>

<p>Here’s the CSS that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Scrollable container */
.table-container {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  overflow: auto; /* Enables both horizontal and vertical scrolling */
  height: 400px; /* Limits table height for vertical scrolling */
}

/* Table layout */
.table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
}

/* Table cells and headers */
.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
  background: red; /* Highlighted background for frozen column */
  position: sticky;
  left: 0; /* Ensures the column stays on the left */
  z-index: 5; /* Keeps the column above other cells */
  color: white;
}

/* Add higher z-index for header */
.table th:nth-child(1) {
  z-index: 6;
}

/* Sticky header */
.table th {
  background-color: #1e3a8a;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0; /* Makes the header stick to the top */
  z-index: 2; /* Keeps the header above the table body */
}

/* Styling for table body */
.table td {
  font-size: 14px;
  color: #6b7280;
}

/* Zebra striping for rows */
.table tr:nth-child(odd) {
  background-color: #f9fafb;
}

/* Hover effect for rows */
.table tr:hover {
  background-color: rgba(14, 116, 144, 0.1);
}

/* No data row styling */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

Menjelaskan CSS

Bekas Boleh Tatal:

Kelas .table-container menambah limpahan: auto untuk mendayakan kedua-dua menatal mendatar dan menegak. Ketinggian: sifat 400px mengehadkan ketinggian jadual, memastikan penatalan menegak untuk set data yang lebih besar.

Tajuk Melekit:

Kedudukan: melekit dan atas: 0 sifat digunakan pada

elemen untuk memastikan pengepala kekal kelihatan semasa menatal menegak.
z-index: 2 memastikan pengepala dipaparkan di atas badan jadual.

Lajur Kiri Beku:

Lajur pertama digayakan menggunakan pemilih nth-child(1) untuk

dan .
Kedudukan: melekit dan kiri: 0 sifat memastikan lajur kekal pada tempatnya sambil menatal secara mendatar.
Nilai indeks-z membezakan sel lajur (5) dan pengepala (6) untuk memastikan pelapisan yang betul.

Menyerlahkan Lajur Beku:

Warna latar belakang untuk lajur beku ditetapkan kepada merah, dengan teks putih untuk keterlihatan yang lebih baik. Anda boleh menyesuaikan ini supaya sepadan dengan pilihan reka bentuk anda.

Bagaimana Ia Berfungsi Bersama

Sambil anda menatal secara menegak, kedudukan: pengepala melekit kekal di bahagian atas .bekas meja.
Apabila menatal secara mendatar, lajur paling kiri kekal tetap, menghasilkan kesan lajur beku.
Gabungan limpahan: auto dan kedudukan: melekit memastikan jadual kekal berfungsi dan mesra pengguna merentas kedua-dua paksi.

Penambahbaikan Anda Boleh Tambah

Pelarasan Responsif:
Gunakan pertanyaan media untuk melaraskan lebar lajur dan reka letak jadual untuk skrin yang lebih kecil.

Pemuatan Kandungan Dinamik:

Gunakan JavaScript untuk mengambil dan mengisi baris secara dinamik untuk set data yang lebih besar.

Ciri Interaktif:

Tambah acara klik baris, penapisan atau pengisihan menggunakan JavaScript untuk mempertingkatkan kefungsian.

Fikiran Akhir

Menggunakan elemen dan beberapa baris CSS, kami telah mencipta jadual responsif yang berkuasa dengan pengepala melekit dan lajur kiri beku. Pendekatan ini ringan, mudah dilaksanakan dan berfungsi dengan lancar merentas penyemak imbas moden.

Sama ada anda membina papan pemuka, memaparkan laporan atau mengendalikan set data yang besar, kaedah ini memastikan reka bentuk yang bersih dan profesional yang juga mesra pengguna. Cubalah dan beritahu saya cara ia berfungsi untuk projek anda! ?