I am attempting to create a navigation bar along with a large, scrollable table that can scroll both horizontally and vertically.
Despite reviewing other solutions on Stack Overflow, I am struggling to implement the same on my own website.
There seems to be an issue with the custom CSS implementation. The table, sourced from web examples, displays properly but the header disappears upon scrolling down, unlike the fixed navbar header.
table thead tr th {
background-color: white !important;
position: sticky !important;
top: -1px !important;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/stylesheets/empdetails/custom.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>EmpDetails</title>
<script>
// some custom scripts
</script>
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">EmpDetails</a>
<form class="form-inline" action="javascript:update();">
<input class="form-control mx-3 ml-4" type="search" id="name" name="name" placeholder="Employee Name" aria-label="Search">
<button class="btn btn-outline-success bg-success mx-3 text-light" type="submit">Search</button>
</form>
<button class="btn btn-outline-info bg-info mx-3 text-light" onclick="download();">Download</button>
</nav>
<br>
<br>
<br>
<div class="table-responsive" style="overflow-x:auto;">
<table id="table" class="table table-hover">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<!-- Table content here -->
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="/stylesheets/empdetails/custom.css" />
</body>
</html>I attempted a solution found here without success. Any insights on what might be incorrect in my implementation?