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>