How to Keep Table Headers Fixed While Scrolling the Table Body?

Fixing Table Headers with Scrolling Body

Maintaining fixed table headers while allowing the body to scroll is a common requirement in web development. To achieve this, employ the following approach:

1. Wrap Table Content in Two Nested Elements:

• Create an outer table element (e.g., #mainTable) to hold the entire table.
• Create an inner table element (e.g., #innerTable) to contain the table body that needs to scroll.

2. Set Outer Table Height:

• Apply a fixed height to the outer table using CSS (e.g., #mainTable { height: 500px; }).

3. Position Inner Table:

• Position the inner table absolutely within the outer table using CSS (e.g., #innerTable { position: absolute; top: 0; bottom: 0; width: 100%; }).

4. Fix Headers:

• Apply position: sticky; to the header rows of the inner table (e.g., #innerTable th { position: sticky; top: 0; }).

5. Enable Scrolling:

• Ensure the inner table's height exceeds the outer table's height, triggering vertical overflow.
• Enable scrolling on the inner table using CSS (e.g., #innerTable { overflow: auto; }).

Example:

<div></div>

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