To address this particular issue, I integrated elements from Rik Schennink's approach and also drew inspiration from Dannie Vinther's method as well. In my scenario, I decided to duplicate the table headers, naming them "responsive-header." By default, this "Responsive-header" is set to not be displayed using display:none. Once the original header goes out of view due to scrolling, the responsive header becomes visible.
Below is a simplified version of what I've implemented:
HTML
<html>
<body>
<main>
<section>
<table id="respond" class='table table-responsive sticky-top responsive-header'>
<thead class="thead-dark">
<tr>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
</tr>
</thead>
</table>
<table class='table table-responsive'>
<thead class="thead-dark">
<tr>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
<th class="sticky-top">sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<!-- Additional rows omitted for brevity -->
</tbody>
</table>
</section>
</main>
</body>
</html>
CSS
.table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
}
.table .thead-dark th {
color: #fff;
background-color: #343a40;
border-color: #454d55;
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
.responsive-header {
display: none;
}
jQuery Implementation
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
if (window.scrollY >= 10) $('#respond').removeClass('responsive-header');
else $('#respond').addClass('responsive-header');
}
document.addEventListener('scroll', debounce(storeScroll), {
passive: true
});
// Update scroll position for first time @
storeScroll();
For further reference, here is the corresponding jsfiddle:https://jsfiddle.net/uf468ocy/