JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://mkoryak.github.io/floatThead/dist/jquery.floatThead.js"></script>
<div>
<div class="taskTableGrid">
<div>
<div style="position: relative; clear: both;" class="floatThead-wrapper">
<table cellspacing="0" cellpadding="0" border="1" style="width: 101%; border-collapse: collapse;
table-layout: auto; min-width: 1438px;" id="Table4" class="sticky-header mGrid"
rules="all">
<thead>
<tr class="headerClass">
<th align="center" scope="col">
Document Name<br />
Uploaded On (PST)
</th>
<th align="center" colspan="4">
<strong>Signed by</strong><br />
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<th align="center" style="width: 25%;" scope="col">
S
<br />
<input type="checkbox" onclick="toggleCheckBoxes('ctl00_ContentPlaceHolder1_FRDG6347cbd327f34368b95653d81ffe800b_GridViewCatDocs',this.checked,'CheckBoxSeller')" />
</th>
<th align="center" style="width: 25%;" scope="col">
B
<br />
...
CSS
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff000;
useAbsolutePositioning = false
}
JavaScript
var top = 0;
$(document).ready(function () {
$(".sticky-header").floatThead({
scrollingTop:function(){
return top;
}
});
});