var resizeTimer;
var wrapperWidth;
$(window).on('resize', function(e) {
$('.fixed-table').fixedHeaderTable('destroy');
if ($(window).width() > 1366) {
$('.fixed-table-wrapper').css({"width":"1302px"});
}
else {
windowWidth = $(window).width() - 48;
$('.fixed-table-wrapper').css({"width": windowWidth + "px"});
}
$('.fixed-table').fixedHeaderTable({
footer: false,
fixedColumn: true,
height: '420px',
altClass: 'alternate-row',
autoShow: false
});
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
$('.fixed-table').fixedHeaderTable('show');
}, 250);
});
.fixed-table-wrapper {
width: 1302px;
overflow-x: scroll;
}
.fixed-table thead {
border-bottom: solid 2px #d1d1d1;
font-weight: 700 !important;
}
table.fixed-table th,
table.fixed-table td {
border: none;
font-size: 13px;
padding: 11px 12px;
vertical-align: middle;
}
.sortable {
position: relative;
}
.sortable::after {
font-family: "Font Awesome 5 Free";
color: #aaa;
content: '\f0dc';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.alternate-row {
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link type="text/css" href="https://rawgit.com/markmalek/Fixed-Header-Table/master/css/defaultTheme.css" rel="stylesheet">
<div class="fixed-table-wrapper">
<table class="fixed-table">
<thead>
<tr>
<th></th>
<th>Edit</th>
<th class="sortable">Request No.</th>
<th class="sortable">Employee ID</th>
<th class="sortable">Employee Name</th>
<th class="sortable">For Family</th>
<th class="sortable">Request Date</th>
<th>Editable Example</th>
<th>Total Amount</th>
<th>Details</th>
<th>Approval History</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>I Putu Yudi Haryasa</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Daniel Giovanni Gunawan</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Muhammad Nadzeri Munawar</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Glenn Kristanto</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Hendryanto Fudiko</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>I Putu Yudi Haryasa</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Daniel Widjaja</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Faris Kurniawan</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Romy Kusuma</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Muhammad Nadzeri Munawar</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/markmalek/Fixed-Header-Table/master/jquery.fixedheadertable.min.js"></script>