JSFiddle - React, Tailwind, and code Playground
HTML
<table id="the-table">
<thead>
<tr>
<th class="domain-col">Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
...
CSS
th {
background-color:red;
}
#the-table {
width: 100%;
}
JavaScript
var topPos;
function AncorControlMatches() {
topPos = Math.max(0, $("#the-table").offset().top - $(this).scrollTop());
if (topPos == 0) {
$("#the-table thead tr").css("top", topPos);
$("#the-table thead tr").css("position", "fixed");
} else {
$("#the-table thead tr").removeAttr("style");
}
}
$(window).scroll(function () {
AncorControlMatches();
});
$(document).ready(function () {
setTimeout(function () {
AncorControlMatches();
$(window).trigger('resize');
}, 300);
});