How to Create a Fixed Header Table Within a Scrollable Div?

How to Create a Fixed Header Table Within a Scrollable Div

A common web development challenge is creating a table with a fixed header that remains visible even when users scroll vertically through the table's body. In this article, we'll explore a solution for this problem using two approaches: a custom CSS solution and a JavaScript-based solution.

Custom CSS Solution

The custom CSS solution relies on positioning the table header absolutely and maintaining its position even as the table body scrolls. The following CSS can be used:

#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;
}

This method simply positions the header above the table body and maintains its top position during scrolling.

JavaScript Solution

An alternative approach utilizes JavaScript to fix the header and handle the scrolling behavior. The following code snippet demonstrates this approach:

// 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";
});

This JavaScript method duplicates the header, positions it fixed at the top of the table, and updates its left position as the table scrolls to maintain alignment with the table body.

Both solutions effectively address the issue of creating a fixed header table within a scrollable div. The choice of approach depends on the specific requirements and preferences of the web project.

The above is the detailed content of How to Create a Fixed Header Table Within a Scrollable Div?. For more information, please follow other related articles on the PHP Chinese website!