How to Create Sticky Table Headers with `position: sticky;`?

Sticky Table Headers with Position: Sticky

The position: sticky; property has recently been implemented in Webkit, offering a convenient way to create elements that remain fixed within their parent container as the page scrolls. While this feature initially worked only within the direct parent element, it now supports scrolling within a table.

Question:

How can I use the position: sticky; property to fix the table header when scrolling within a div container?

Answer:

Position sticky on thead th works effortlessly in 2018! Simply add the following CSS rule:

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

To use sticky headers, your table must include a thead and th elements.

<code class="html"><table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table></code>

If your thead contains multiple rows, you can specify the sticky behavior for the first row:

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

As of March 2018, sticky headers are supported in most modern browsers. Refer to https://caniuse.com/#feat=css-sticky for the latest browser compatibility information.

Credit for this solution goes to @ctf0, who shared it in a comment on December 3, 2017.

The above is the detailed content of How to Create Sticky Table Headers with `position: sticky;`?. For more information, please follow other related articles on the PHP Chinese website!