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

Patricia Arquette
Release: 2024-10-30 00:42:02
Original
197 people have browsed it

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!