$(document).ready(function() {
var firstheight = $('.first').height();
$("thead tr.second th, thead tr.second td").css("top", firstheight)
});
.tablenm {
width: 100%;
margin-bottom: 0rem;
font-family: sans-serif;
font-size: 12px;
}
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
z-index: 2;
border: 1px solid #e3e6f0;
}
thead tr:first-child {
left: 0;
z-index: 1;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
background: #FFF;
}
tbody tr {
left: 0;
top:0;
z-index: 3;
}
table tbody:nth-of-type(1) tr:nth-of-type(1) td {
border-top: none !important;
}
table thead th {
border-top: none !important;
border-bottom: none !important;
box-shadow: inset 0 1px 0 #e3e6f0,
inset 0 -1px 0 #e3e6f0;
padding: 2px 0;
}
table thead th {
background-clip: padding-box
}
td,
th {
padding: 0em;
}
thead tr.first th, thead tr.first td {
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0;
background: #FFFFFF;
}
thead tr.second th, thead tr.second td {
position: sticky;
position: -webkit-sticky; /* Safari */
background: #FFFFFF;
}
.tablenm th,
.tablenm td {
padding: 0.25rem;
vertical-align: top;
border-top: 1px solid #e3e6f0;
}
.tablenm thead th {
vertical-align: bottom;
border-bottom: 2px solid #e3e6f0;
}
.tablenm tbody + tbody {
border-top: 2px solid #e3e6f0;
}
.tablenm-sm th,
.tablenm-sm td {
padding: 0.3rem;
}
.tablenm-bordered {
border: 1px solid #e3e6f0;
}
.tablenm-bordered th,
.tablenm-bordered td {
border-top: none;
border-bottom: 1px solid #e3e6f0;
border-right: 1px solid #e3e6f0;
}
.tablenm-bordered thead th,
.tablenm-bordered thead td {
border-bottom-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 525px;">
<table class="tablenm tablenm-bordered">
<thead>
<tr class="text-center first" style=" font-size: 12px;color: #555;">
<th colspan="5" ><strong>5 GALONES (U)</strong></th>
<th colspan="4" ><strong>5 GALONES ($)</strong></th>
<th colspan="4" ><strong>NO RETORNABLE</strong></th>
<th colspan="4" ><strong>TOTAL</strong></th>
</tr>
<tr class="align-middle text-center second" style=" font-size: 12px;color: #555;">
<th><strong>SUPERVISOR</strong></th>
<th><strong>META</strong></th>
<th><strong>VENTA</strong></th>
<th><strong>PY</strong></th>
<th><strong>ALC</strong></th>
<th><strong>META</strong></th>
<th><strong>VENTA</strong></th>
<th><strong>PY</strong></th>
<th><strong>ALC</strong></th>
<th><strong>META</strong></th>
<th><strong>VENTA</strong></th>
<th><strong>PY</strong></th>
<th><strong>ALC</strong></th>
<th><strong>META</strong></th>
<th><strong>VENTA</strong></th>
<th><strong>PY</strong></th>
<th><strong>ALC</strong></th></tr>
</thead>
<tbody>
<tr>
<th>NOMBRE 1</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 2</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 3</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr><tr>
<th>NOMBRE 4</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 5</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 6</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 7</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 8</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 9</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 10</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 11</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
</div>