<style>
table {
position: relative;
width: 700px;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
display: block; /*seperates the first cell in the header from the header*/
background-color: #88b;
}
/*tbody*/
tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
width: 700px;
height: 239px;
overflow: scroll;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
display: block; /*seperates the first column from the tbody*/
height: 40px;
background-color: #99a;
}
</style>
<body>
<table id="example23" cellspacing="0" role="grid" aria-describedby="example23_info">
<thead>
<tr>
<th colspan="2" class="thead-border">SKU</th>
<th colspan="5" class="thead-border">ISIS</th>
<th colspan="5" class="thead-border">FBL Blip</th>
<th colspan="5" class="thead-border">FBL 909</th>
</tr>
<tr>
<th class=" footable-sortable sort sorting" data-field="sku_id" data-sort="desc" style="background-color: white">
SKU
</th>
<th class="footable-sortable sort sorting thead-border" data-field="is_active" data-sort="desc">
Active
</th>
<th class="footable-sortable sort sorting thead-border" data-field="stock_status" data-sort="desc">
Stock Status
</th>
<th class="footable-sortable sort sorting thead-border" data-field="isis_threshold" data-sort="desc">
<!--Threshold-->
T1
</th>
<th class="footable-sortable sort sorting thead-border" data-field="isis_threshold_critical" data-sort="desc">
<!--Threshold Critical-->
T2
</th>
<th class="thead-border">Current Stocks</th>
<th class="footable-sortable thead-border" orders="" count="" <a="" title="How much to order when ISIS stocks reached to threshold">(i)
</th>
<th class="footable-sortable sort sorting thead-border" data-field="blip_stock_status" data-sort="desc">
Stock Status
</th>
<th class="footable-sortable sort sorting thead-border" data-field="fbl_blip_threshold" data-sort="desc">
<!--Blip-FBL Threshold-->
T1
</th>
<th class="footable-sortable sort sorting thead-border" <a="" data-field="fbl_blip_threshold_critical" data-sort="desc" href="javascript:;">
<!--Threshold Critical-->
T2
</th>
<th class="thead-border">Current Stocks</th>
<th class="footable-sortable thead-border" orders="" count="" <a="" title="How much to order when FBL-Blip Lazada reached to threshold">(i)
</th>
<th class="footable-sortable sort sorting thead-border" data-field="f909_stock_status" data-sort="desc">
Stock Status
</th>
<th class="footable-sortable sort sorting" data-field="fbl_909_threshold" data-sort="desc">
<!--Threshold-->
T1
</th>
<th class="footable-sortable sort sorting" data-field="fbl_909_threshold_critical" data-sort="desc">
<!--Threshold Critical-->
T2
</th>
<th>Current Stocks</th>
<th class="footable-sortable thead-border" orders="" count="" <a="" title="How much to order when FBL-909 Lazada reached to threshold">(i)
</th>
</tr>
<!-- filters -->
<tr class="filters-thead filters-hide">
<th class="tg-kr94 thead-border ">
<input type="text" data-filter-field="isis_sku" data-filter-type="like" style="width: 92px;background-color: white" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border">
<select data-filter-field="is_active" data-filter-type="operator" class="filter form-control ">
<option class="">Select</option>
<option value="=1">Yes</option>
<option value="=0">No</option>
</select>
</th>
<th class="tg-kr94 thead-border">
<select data-filter-field="stock_status" data-filter-type="like" class="filter form-control ">
<option value="">Select</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Slow">Slow</option>
<option value="Not Moving">Not Moving</option>
<option value="Do not order">Do Not Order</option>
</select>
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="isis_threshold" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="isis_threshold_critical" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border"></th>
<th class="tg-kr94 thead-border"></th>
<th class="tg-kr94 thead-border">
<select data-filter-field="blip_stock_status" data-filter-type="like" class="filter form-control ">
<option value="">Select</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Slow">Slow</option>
<option value="Not Moving">Not Moving</option>
<option value="Do not order">Do Not Order</option>
</select>
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="fbl_blip_threshold" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="fbl_blip_threshold_critical" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border"></th>
<th class="tg-kr94 thead-border"></th>
<th class="tg-kr94 thead-border">
<select data-filter-field="f909_stock_status" data-filter-type="like" class="filter form-control ">
<option value="">Select</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Slow">Slow</option>
<option value="Not Moving">Not Moving</option>
<option value="Do not order">Do Not Order</option>
</select>
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="fbl_909_threshold" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border">
<input type="text" data-filter-field="fbl_909_threshold_critical" data-filter-type="operator" class="filter form-control ">
</th>
<th class="tg-kr94 thead-border"></th>
<th class="tg-kr94 thead-border"></th>
</tr>
</thead><tbody> <tr>
<td class="tg-kr94 ">SCF172/10</td>
<td class="tg-kr94">No</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">6</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF676/01</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF764/00</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">-1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF178/28</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF178/27</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF178/25</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Slow</td>
<td class="tg-kr94">5</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">8</td>
</tr>
<tr>
<td class="tg-kr94 ">SCF639/05</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">89</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">3</td>
</tr>
<tr>
<td class="tg-kr94 ">JC302/51</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">HR1952/00</td>
<td class="tg-kr94">No</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
</tr>
<tr>
<td class="tg-kr94 ">HR1457/00</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">21</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Slow</td>
<td class="tg-kr94">4</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">4</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">FY2422/20</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">FC8057/01</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">FC8021/03</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4168</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4168/00</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4155</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4148</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4144</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4143</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Slow</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">5</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4124</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Slow</td>
<td class="tg-kr94">2</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">3</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4123</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Slow</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">2</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4104</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">AC4103</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">GC9682/86</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">slow</td>
<td class="tg-kr94">4</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">7</td>
<td class="tg-kr94">slow</td>
<td class="tg-kr94">4</td>
<td class="tg-kr94">3</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">7</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 ">GC9660/36</td>
<td class="tg-kr94">Yes</td>
<td class="tg-kr94">Not moving</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">1</td>
<td class="tg-kr94">5</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">Do not order</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
<tr>
<td class="tg-kr94 "></td>
<td class="tg-kr94">No</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94"></td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
<td class="tg-kr94">0</td>
</tr>
</tbody>
</table>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});
</script>
