I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows.
I managed to make the table head sticky, but had to apply this to each individual thead th to accommodate chromium.
The problem arises in chromium where the text within thead th sticks but the background color does not, causing it to scroll away. This issue doesn't occur in Firefox.
#thead_presets{
/* background: white; */
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.chrome_sticky{
background: white;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a647a66">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269776975">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overflow-scroll" style="height:350px;width: 855px;"
<table class="table" id="preset_table" style="text-align: center;" >
<thead id="thead_presets">
<tr class="chrome_sticky">
<th class="chrome_sticky" scope="col">Name</th>
<th class="chrome_sticky" scope="col">ISO</th>
<th class="chrome_sticky" scope="col">AV</th>
<th class="chrome_sticky" scope="col">TV</th>
<th class="chrome_sticky" scope="col">Light 1</th>
<th class="chrome_sticky" scope="col">Light 2</th>
<th class="chrome_sticky" scope="col">Light 3</th>
<th class="chrome_sticky" colspan="2" scope="col">Actions</th>
</tr>
</thead>
<tbody id="preset_table_body">
</tbody>
</table>
</div>