Sticky table header

Keep table headings visible as rows scroll underneath.

Live preview Try the effect

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Keep table headings visible as rows scroll underneath. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Long tables with many rows.

Related concepts

A sticky table header belongs to the table, unlike a fixed site header.

Describe this effect

Output language

Keep table headings sticky within the scrolling table container and aligned with their columns.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.