I'm struggling with a Table that has a fixed header. The issue is that the card elements keep scrolling on top of the fixed header. I've attempted to adjust the z-index of thead and decrease the z-index of the card element, but nothing seems to be resolving the problem.
document.getElementById("scrollarea").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
$(this).find("thead")[0].style.transform = translate;
});#scrollarea {
max-height: 200px;
overflow: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="scrollarea">
<table class="table table-striped">
<thead>
<tr>
<th>Row 1</th>
<th>Row 2</th>
<th>Row 3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</td>
</tr>
... <!-- More card elements -->
</tbody>
</table>
</div>I need assistance in ensuring that the thead remains on top when the div is scrolled.
Any help would be greatly appreciated. Thank you.