# Sticky Header Row in Long Tables

> Keeps the header row of long tables in posts visible while visitors scroll down through the rows, so they always know which column is which.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: tables, sticky, readability
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-sticky-table-headers/

## Code

```css
:root {
    --wpide-table-top: 0px;
}

.wp-block-table thead th,
.entry-content table thead th {
    position: sticky;
    top: var(--wpide-table-top);
    z-index: 1;
    background: var(--wp--preset--color--base, #ffffff);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.admin-bar .wp-block-table thead th,
.admin-bar .entry-content table thead th {
    top: calc(var(--wpide-table-top) + var(--wp-admin--admin-bar--height, 32px));
}

.wp-block-table:has(thead) {
    overflow: visible;
}
```

## Notes

Only works when the table is not inside a horizontally scrolling wrapper. Set --wpide-table-top to your sticky header height.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Sticky Header Row in Long Tables" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/