<!DOCTYPE html>
<html>
<head>
<script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="table-responsive">
<table class="table sticky-header table-bordered table-hover">
<thead>
<tr>
<th>Employee</th>
<th>Function</th>
<th>Drivers License B</th>
<th>Foo A</th>
<th>Foo B</th>
<th>Foo C</th>
<th>Foo D</th>
<th>Foo E</th>
<th>Foo F</th>
<th>Foo G</th>
<th>Foo H</th>
<th>Foo I</th>
</tr>
</thead>
<tbody>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>Electronic Technician</td>
<td class="bg-success">
2027-08-17
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td class="bg-warning">
2017-08-18
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td class="bg-success">
2018-11-01
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td class="bg-success">
2027-08-20
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td class="bg-success">
2018-11-22
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td class="bg-warning">
2017-08-17
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td class="bg-success">
2018-11-02
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td class="bg-success">
2017-12-04
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg-success">
2019-10-01
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg-success">
3563-04-25
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>Trainee Operator Coil</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Employee Name</td>
<td>No contract</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
let $stickyHeaders = $('.sticky-header');
if ($stickyHeaders.length) {
const triggerHeight = 0;
let $document = $(window);
let $firstRow = $stickyHeaders.find('thead');
$document.on('scroll', function () {
let pxScrolled = $document.scrollTop();
if (pxScrolled > triggerHeight) {
pxScrolled -= triggerHeight;
let translate = "translateY(" + pxScrolled + "px) translateZ(1px)";
$firstRow.css('transform', translate);
} else {
$firstRow.css('transform', 'translateY(0px) translateZ(1px)');
}
});
let $responsiveTable = $stickyHeaders.parent('.table-responsive');
let $firstColumn = $stickyHeaders.find('tr td:first-child, tr th:first-child');
$responsiveTable.on('scroll', function () {
let pxScrolled = $responsiveTable.scrollLeft();
let translate = "translateX(" + pxScrolled + "px) translateZ(0px)";
$firstColumn.css('transform', translate);
});
}
/* Styles go here */
.table-responsive .sticky-header {
transform-style: preserve-3d;
}
.table-responsive .sticky-header th, .table-responsive .sticky-header td {
white-space: nowrap;
border: 1px solid #000;
}
.table-responsive .sticky-header tr td {
background-color: white;
backface-visibility: hidden;
}
.table-responsive .sticky-header tr th {
background-color: #DDD;
}