Position sticky on thead

Position sticky on thead th works in 2018!

In your stylesheets just add this one line:

thead th { position: sticky; top: 0; }

Your table will need to include thead and th for this to style.

<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>

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)

If you need sticky header for chrome only then you can set position: sticky; top: some_value (top property is mandatory) for td element in a thead element.

See:

<table border=1>
  <thead>
    <tr>
      <td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
      <td>Simple column</td>
    </tr>
  </thead>

table with a stiky header