Bagaimana untuk Mencipta Jadual Pengepala Tetap Dalam Div Boleh Tatal?

Cara Membuat Jadual Pengepala Tetap Dalam Div Boleh Tatal

Cabaran pembangunan web biasa ialah mencipta jadual dengan pengepala tetap yang kekal kelihatan walaupun pengguna menatal secara menegak melalui badan meja. Dalam artikel ini, kami akan meneroka penyelesaian untuk masalah ini menggunakan dua pendekatan: penyelesaian CSS tersuai dan penyelesaian berasaskan JavaScript.

Penyelesaian CSS Tersuai

The penyelesaian CSS tersuai bergantung pada meletakkan pengepala jadual secara mutlak dan mengekalkan kedudukannya walaupun semasa badan jadual menatal. CSS berikut boleh digunakan:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Kaedah ini hanya meletakkan pengepala di atas badan jadual dan mengekalkan kedudukan teratasnya semasa menatal.

JavaScript Solution

Pendekatan alternatif menggunakan JavaScript untuk membetulkan pengepala dan mengendalikan tingkah laku menatal. Coretan kod berikut menunjukkan pendekatan ini:

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

Kaedah JavaScript ini menduplikasi pengepala, meletakkannya di bahagian atas jadual dan mengemas kini kedudukan kirinya semasa jadual menatal untuk mengekalkan penjajaran dengan badan jadual .

Kedua-dua penyelesaian secara berkesan menangani isu mencipta jadual pengepala tetap dalam div boleh tatal. Pilihan pendekatan bergantung pada keperluan khusus dan keutamaan projek web.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Pengepala Tetap Dalam Div Boleh Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!