CSS-Only Sticky Table Headers In Chrome

position: sticky doesn't work with some table elements (thead/tr) in Chrome. You can move sticky to tds/ths of tr you need to be sticky. Like this:

.table {  thead tr:nth-child(1) th{    background: white;    position: sticky;    top: 0;    z-index: 10;  }}

Also this will work.

.table {    position: sticky;    top: 0;    z-index: 10;}

You can move header to separate layout. For example:

<table class="table">    <thead>    <tr>        <th>1</th>        <th>2</th>        <th>3</th>        <th>4</th>    </tr>    </thead></table><table>    <tbody>    <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>    </tr>    <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>    </tr>    <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>    </tr></table>

For somebody, who is still looking for a solution and isn't satisfied with the accepted one.

1) Use sticky-top class on th element.

2) With own class

th.sticky-header {  position: sticky;  top: 0;  z-index: 10;  /*To not have transparent background.  background-color: white;*/}

<table class="table">  <thead>    <tr>      <th class="sticky-header">1</th>      <th class="sticky-header">2</th>      <th class="sticky-header">3</th>      <th class="sticky-header">4</th>    </tr>  </thead>  <tbody>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>      <td>4</td>    </tr>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>      <td>4</td>    </tr>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>      <td>4</td>    </tr>  </tbody></table>