How to fixed header of the table to the top of the page if table must be scrolable vertically? - header

Question

I have table which is very long vertically, then it must use overflow: auto hidden.
I have to prepare header of this table as fixed to the top of the page after scroll (prevent to hide header of the table after scrolling).
The problem is when I trying to use position: fixed; top: 100px on the thead or thead tr, this header is losing conection to the table and tbody and width of this is not as tbody (th aren't connected to appropriate td in body).
Also tbody is losing overflow: auto hidden and now has typical width 100% of the page.
SOME CONTENT BEFORE
<div style="overflow: auto;" class="table-responsive">
<table class="products-table">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
SOME CONTENT AFTER
Styling:
.products-table
border-collapse: separate
border-spacing: 0 12px
min-width: 100%
font-size: 15px
border-bottom: 4px solid grey
td,th
padding: 0 10px
max-width: 300px
&:first-of-type
border-radius: 9px 0 0 9px
padding-left: 14px
&:last-of-type
border-radius: 0 9px 9px 0
padding-right: 14px
thead
background-color: grey
color: white
font-weight: 700
th
height: 26px
white-space: nowrap
a
color: white
tbody
tr
padding: 0 14px
td
word-break: break-word
background-color: white
max-width: 300px
&:nth-of-type(odd) td
background-color: #f6f6f6
Help, please...
I have tried yet many options based on similar questions, like for example position sticky.

Answer 1

You may add the following codes into ur css.
thead tr th {
/*Fixed Scroll*/
position: sticky;
top: 0;
z-index: 9999;
}
table {
position: relative;
}