JSFiddle - React, Tailwind, and code Playground
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum facere voluptas soluta iste possimus, dolorum aliquam alias cupiditate nostrum placeat laudantium, culpa perferendis, laboriosam omnis neque aperiam! Voluptas, necessitatibus, ipsa.</p>
<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>
...
CSS
th {
background-color:red;
}
#the-table {
width: 50%;
margin: 0 auto;
position: relative;
}
#the-table tr.scroll {
display: table;
width: 100%;
position: absolute;
}
JavaScript
var topPos;
function AncorControlMatches() {
topPos = $('#the-table').offset().top,
pos = $(document).scrollTop(),
total = pos - topPos;
if (pos > topPos) {
$("#the-table thead tr").css("top", total).addClass('scroll');
} else {
$("#the-table thead tr").removeClass('scroll');
}
}
$(window).scroll(function () {
AncorControlMatches();
});
$(document).ready(function () {
setTimeout(function () {
AncorControlMatches();
$(window).trigger('resize');
}, 300);
});