Would be nice to have a simple way to achieve sticky table headers. I found a thread with some suggestions but none of them seem to work.
I have a couple tables that could have 150 records in them and it would be nice to have a sticky table header. I have tried this from ChatGPT and applied the class to my table but no luck.
<style>
/* Custom CSS for sticky table header */
.sticky-table-header th {
position: sticky !important;
top: 10;
}
</style>
Try
<div class="container">
<div class="row">
<div class="col">
<div class="">
<table class="table table-striped w-100">
<thead class="sticky-top">
<tr>
<th>First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody is="dmx-repeat" id="repeat1" dmx-bind:repeat="150">
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
