HTML Table with Fixed Header on Scroll using position: sticky CSS

css
Published on November 22, 2019

Persistent headers on HTML tables can be achieved using position:sticky CSS property on <thead> or <th> elements.

Creating table with fixed headers while page scrolling was once quite a complicated problem that was somehow achieved with Javascript. But now it can be achieved easily with 2 lines of CSS — positioning <th> as sticky.

th {
    position: sticky;
    top: 0;
}

Alternatively, <thead> can be specified sticky as well.

thead {
    position: sticky;
    top: 0;
}

Browser Compatability

Chrome & Edge (90+), Firefox and Safari support this.

Demo

View Demo

Download Codes

HTML

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tr>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
</table>

CSS

th {
    position: sticky;
    top: 0;
}

Useful Resources

In this Tutorial