How to Keep Table Headers Fixed While Scrolling with CSS?

Sticky CSS for Table Head - Chrome, FF, Edge

When you have a table where the data contained within the table body can overflow and you want the table header to remain in view, you can use CSS. A simple solution that requires only a bit of CSS with no JavaScript required requires the use of position: sticky, and appropriately setting the top property.

The example below uses a table class of tableFixHead to ensure that the table fits inside of this container that is set to overflow: auto. This will allow the body of the table to overflow within the container while the header remains stationary.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Inside of the table itself, you can see that the table head th elements are now set to position: sticky. This means that when they reach the top of the container, they will stick to the top of the container instead of scrolling with the rest of the data.

<div>

If you were to replicate this example, you would see that the header remains stationary when scrolling allowing the user to easily see the column names of the table data.

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