How to Add a Scrollbar to an HTML Table While Keeping the Header Fixed?

Displaying Scrollbar on HTML Table

To display a scrollbar on an HTML table, consider the following approach:

Wrap the Table in a Positioned Div

Enclose the table within a div element with a relative or absolute position. This div will act as a container for the scrollable area.

<div>

Set Overflow to Auto on the Div

Apply the CSS property overflow:auto to the container div. This allows for the overflow of content when the table exceeds its boundaries.

#table-container { overflow: auto; }

Position Table Header Absolutely

To keep the table header fixed while scrolling, position the thead elements absolutely.

#table-header { position: absolute; }

Set Height for the Container

Specify a height for the container div to define the scrollable area.

#table-container { height: 400px; }

Example Implementation

<div>

#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

This approach provides a scrollbar while maintaining the table header fixed at the top.

The above is the detailed content of How to Add a Scrollbar to an HTML Table While Keeping the Header Fixed?. For more information, please follow other related articles on the PHP Chinese website!