Bootstrap 4 - Fixed/Sticky Headers for Table on a Tab - html

Question

I have a simple Bootstrap 4 page with multiple tabs on the page. Each tab has a different table, some of which have a large number of rows. I would now like to make the table header on each tab fixed/sticky so that it doesn't scroll as the user scrolls the page down.
Here's an example of my page with a table on the first tab:
th {
background: white;
position: sticky;
top: 0;
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#"><img src="" width="165" height="36" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Management</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="jobs.php?action=showall">Jobs List</a>
<a class="dropdown-item" href="jobsSearch.php">Search Jobs</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-bordered">
<tr>
<td width=35%>Ref Number:</td>
<td width=80%>123456</td>
</tr>
<tr>
<td>Name:</td>
<td>Acme Corp Pty Ltd</td>
</tr>
<tr>
<td>Job Number:</td>
<td>5521236987452</td>
</tr>
<tr>
<td>Address:</td>
<td>21 Jump St, Beverley Hills 90210</td>
</tr>
<tr>
<td>Client:</td>
<td>Sony Pty Ltd</td>
</tr>
<tr>
<td>State:</td>
<td>CA </td>
</tr>
<tr>
<td>Inspection Date:</td>
<td></td>
</tr>
</table>
</div>
</div>
<ul class="nav nav-tabs" id="projectTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="Contacts-tab" data-toggle="tab" href="#Contacts" role="tab" aria-controls="Contacts" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Contractors-tab" data-toggle="tab" href="#Contractors" role="tab" aria-controls="Contractors" aria-selected="false">Contractors</a>
</li>
</ul>
<div class="tab-content" id="Tabs">
<div class="tab-pane fade show active" id="Contacts" role="tabpanel" aria-labelledby="Contacts">
<table class="table table-striped table-hover table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Code</th>
</thead>
<tbody>
<tr id="211140">
<td> Jaxon Copeley</td>
<td>Senior Designer</td>
<td>8</td>
</tr>
<tr id="212265">
<td> Sean Dacey</td>
<td>Associate</td>
<td>1687</td>
</tr>
<tr id="212364">
<td> Nathan Giffen</td>
<td>Senior Designer</td>
<td>273.8</td>
</tr>
<tr id="212312">
<td> Tristan Godson</td>
<td>Project Designer </td>
<td>85.75</td>
</tr>
<tr id="207542">
<td> Anthony McAulay</td>
<td>Designer</td>
<td>566.2</td>
</tr>
<tr id="207990">
<td> Gabriella Schofield</td>
<td>Senior Designer</td>
<td>107</td>
</tr>
<tr id="213479">
<td> Hayden Giblin</td>
<td>Creative Designer</td>
<td>60</td>
</tr>
<tr id="208423">
<td> Archer Doolan</td>
<td>Associate</td>
<td>487.9</td>
</tr>
<tr id="208468">
<td> Taylah Hutcheon</td>
<td>Senior Associate</td>
<td>5</td>
</tr>
<tr id="212645">
<td> Hayley Hodgson</td>
<td>Director</td>
<td>37</td>
</tr>
<tr id="214303">
<td> Henry Powell</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
Is it possible to have the headers on the tabs fixed so they are visible as you scroll down the page?

Answer 1

You can use the position:sticky property on th elements for this.
If you have an additional fixed element on your page (like a fixed navbar), set the top property to the height of this element, so it sticks to the bottom of it:
th {
background: white;
position: sticky;
top: 60px; /* this is the distance from the top of the viewport your element will 'stick' to. */
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-7">
<table class="table table-striped table-bordered">
<tr>
<td width=35%>Ref Number:</td>
<td width=80%>123456</td>
</tr>
<tr>
<td>Name:</td>
<td>Acme Corp Pty Ltd</td>
</tr>
<tr>
<td>Job Number:</td>
<td>5521236987452</td>
</tr>
<tr>
<td>Address:</td>
<td>21 Jump St, Beverley Hills 90210</td>
</tr>
<tr>
<td>Client:</td>
<td>Sony Pty Ltd</td>
</tr>
<tr>
<td>State:</td>
<td>CA </td>
</tr>
<tr>
<td>Inspection Date:</td>
<td></td>
</tr>
</table>
</div>
</div>
<ul class="nav nav-tabs" id="projectTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="Contacts-tab" data-toggle="tab" href="#Contacts" role="tab" aria-controls="Contacts" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Contractors-tab" data-toggle="tab" href="#Contractors" role="tab" aria-controls="Contractors" aria-selected="false">Contractors</a>
</li>
</ul>
<div class="tab-content" id="Tabs">
<div class="tab-pane fade show active" id="Contacts" role="tabpanel" aria-labelledby="Contacts">
<table class="table table-striped table-hover table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Code</th>
</thead>
<tbody>
<tr id="211140">
<td> Jaxon Copeley</td>
<td>Senior Designer</td>
<td>8</td>
</tr>
<tr id="212265">
<td> Sean Dacey</td>
<td>Associate</td>
<td>1687</td>
</tr>
<tr id="212364">
<td> Nathan Giffen</td>
<td>Senior Designer</td>
<td>273.8</td>
</tr>
<tr id="212312">
<td> Tristan Godson</td>
<td>Project Designer </td>
<td>85.75</td>
</tr>
<tr id="207542">
<td> Anthony McAulay</td>
<td>Designer</td>
<td>566.2</td>
</tr>
<tr id="207990">
<td> Gabriella Schofield</td>
<td>Senior Designer</td>
<td>107</td>
</tr>
<tr id="213479">
<td> Hayden Giblin</td>
<td>Creative Designer</td>
<td>60</td>
</tr>
<tr id="208423">
<td> Archer Doolan</td>
<td>Associate</td>
<td>487.9</td>
</tr>
<tr id="208468">
<td> Taylah Hutcheon</td>
<td>Senior Associate</td>
<td>5</td>
</tr>
<tr id="212645">
<td> Hayley Hodgson</td>
<td>Director</td>
<td>37</td>
</tr>
<tr id="214303">
<td> Henry Powell</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>