How Can I Create Sticky Table Headers within a Scrolling Div?

Sticky Positioning within a Scrolling Element with a Table

The recently introduced CSS property position: sticky allows elements to remain fixed within their parent container while scrolling. However, there is a question regarding its functionality within a scrolling div that contains a table.

The Current Situation

Initially, it was thought that position: sticky could only work within its parent element. However, it has been discovered that this property can be used to create sticky table headers within a scrolling div.

The Solution

To achieve this, simply add the following line to your stylesheet:

<code class="css">thead th { position: sticky; top: 0; }</code>

The and elements are required for this styling to work.

Multiple Header Rows

If your table has multiple rows in the , you can make the first row sticky by using the following code:

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

Browser Support

As of March 2018, support for position: sticky is widespread across modern browsers. You can check the latest compatibility information at https://caniuse.com/#feat=css-sticky.

Credit

The credit for this discovery goes to @ctf0, who shared this technique in December 2017.

The above is the detailed content of How Can I Create Sticky Table Headers within a Scrolling Div?. For more information, please follow other related articles on the PHP Chinese website!