How to Keep HTML Table Headers Visible While Scrolling the Body?

How to display scroll bar onto a html table

When creating HTML tables, sometimes it's necessary to have the headers remain visible, even as the table's content scrolls.

To achieve this, wrap the table in a non-statically positioned div that has an overflow:auto CSS property. Then, position the elements in the table head absolutely, as seen below:

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

<div>

This will create a table with a fixed header and a scrolling body, similar to method 2 in the provided URL.

The above is the detailed content of How to Keep HTML Table Headers Visible While Scrolling the Body?. For more information, please follow other related articles on the PHP Chinese website!