I have a headline and a thead that need to be sticky, but they shouldn’t stay sticky when the last row comes up. Instead, they should stop being sticky so that the last row of the tbody is always visible and is the last element that scrolls away.
I have tried to separate the headline and the thead from the tbody.
But i coudn’t find a way to let the headline/thead div to stop before the last row.
body {
height: 1000px;
}
.table tbody td {
min-width: 6rem;
max-width: 6rem;
}
.table th {
min-width: 6rem;
max-width: 6rem;
}
.stickyHeader {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="pb-4 ">
<div class=" stickyHeader mb-0" >
<h4 class="pb-1 ">My headline</h4>
<div class="table-responsive">
<table class="table table-sm table-bordered border-dark mb-0">
<thead>
<tr>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="table-responsive">
<table class="table table-responsive table-sm table-bordered border-dark">
<tbody>
<tr>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
</tr>
<tr>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
</tr>
<tr>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
<td > Content </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>