How do I get a responsive table with fixed header in MVC - html

Question

I would like to make my table header fixed (always visible). I tried this on multiple ways, creating 2 tables above each other, position-fixed, gave each column a specific width, ...
BUT I also would like to my table to be responsive, just like the bootstrap4 standards. Can't find any solution online that works for me, does anyone have any suggestions or starting points what to look for?
--- See what I tried down below ----
My basic table now:
<div style="overflow:auto; height:60vh">
<table class="table table-hover trCursor">
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">
#Html.ActionLink("Name", "Products", new { sortOrder = ViewBag.NameSortParm }) <i class="fas fa-sort"></i>
</th>
<th scope="col">Description</th>
<th scope="col">(Internal) Product number</th>
<th scope="col">Price(s)</th>
<th scope="col">Supplier(s)</th>
<th scope="col">
#Html.ActionLink("Created", "Products", new { sortOrder = ViewBag.DateSortParm }) <i class="fas fa-sort"></i>
</th>
#*<th scope="col">Product type</th>*#
</tr>
</thead>
<tbody id="productsBody">
#Html.Partial("_Products", Model)
</tbody>
</table>
</div>
Update These are the main things I tried out:
https://codepen.io/nikhil8krishnan/pen/WvYPvv This worked amazing on a large device (pc and tablet) but I couldn't find a solution to make this mobile-friendly. There are 2 different tables above each other so you have to scroll them separately on your phone.. (horizontal)
http://www.iamramraj.com/bootstrap-fixed-table-header-using-css/?i=1
This one only worked on a large screen. Turned out they use the bootstrap classes col-xs-5 etc to give the columns a specific width, which results in a non-responsive table.
Update2 Next things that I tried:
https://mdbootstrap.com/support/jquery/fixed-header-with-scrolling-table/ This is a very pretty working table but not responsive. On a small device, the table header and body scroll differently and have different widths.
https://forums.asp.net/t/2094852.aspx?MVC+Fixed+Header+rows+for+IEnumerable+table+razor+view Same problem here, working table but not resonsive. Columns are a different width from the headers.
https://www.bootply.com/JnOYtO9xzn When I implemented this one, it wasn't even responsive to start with! The header was fixed and the body scrollable but the position wasn't right and also not responsive.
https://jsfiddle.net/dPixie/byB9d/3/ Guess what.. Same problem again, header columns are not the same width as the body columns.