Position sticky on thead

Question

As you might know, position: sticky; has landed in Webkit (demo). So far I can see this only works within the parent element. But I'd like to know if I can use this in a scrolling div with a table.

So it needs to 'listen' on the scrolling event of the div, not the table.

I know I can do this with javascript and absolute positioning, but I was wondering if the sticky-positioning would support this.

Answer 1

Position sticky on thead th works in 2018!

table { border-spacing: 1px; }
th, td { background: white; color: black; border: 1px solid black; }
thead th { position: sticky; top: 0; }

<table>
    <thead>
        <tr> <th>column 1 <th>column 2 <th>column 3 <th>column 4
    </thead>
    <tbody>
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
        <tr> <td>data <td>data <td>data <td>data
    </tbody>
</table>

Also, if you have multiple rows in <thead>, you can select the first one to remain sticky:

thead tr:first-child th { position: sticky; top: 0; }

As of March 2018 support is pretty much there across modern browsers ref: https://caniuse.com/#feat=css-sticky

Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)