How to Make HTML Table Headers Stay Visible When Scrolling?

Using a Wrapper Div to Display Scroll Bars on HTML Tables

When creating an HTML table, it may be necessary to display scroll bars to allow the table's contents to be viewed even when the table size exceeds its container.

To achieve this, wrap the table within a non-statically positioned <div> element and assign an overflow:auto CSS property to it. This creates a scrollable area for the table's content.

To keep the table headers (located in the section) visible while scrolling, position them absolutely and place them on top of the scroll area. This prevents the headers from being hidden by the scrollable content.

Here's an example that incorporates both scroll bars and fixed headers:

CSS:

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

HTML:

<div>

By applying this technique, you can create an HTML table that allows scrolling while maintaining visible headers, as shown in the example provided by the user.

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