I have implemented a solution to make the table header sticky on scroll. The solution works perfectly in Chrome and Firefox, but I am facing issues with it in Edge and Brave Browser.
I've experimented with making the table header absolute, but this caused disruptions to the overall table structure. I'm struggling to find a way to ensure cross-browser compatibility.
For reference, here is the link to the code on jsfiddle: https://jsfiddle.net/zp1Lk6mw/
Below is the code snippet:
HTML
<div class="table-wrapper table-1">
<div id="table-1-container" class="table-container">
<table class="table">
<thead id="table-1-head">
<tr class="table-header">
<th>Column 1</th>
<th>Column 2</th>
...
// Code truncated for brevity
</tr>
</thead>
...
</table>
</div>
</div>
CSS
:root {
--orange: #f47a14;
--blue-header: #003f5b;
--dark-grey: #999999;
--light-grey: #f8f8fc;
--text-color: #333333;
}
// CSS rules omitted for space reasons
...
.table tr td div::-webkit-scrollbar {
height: 0px;
}
.table tr td div::-webkit-scrollbar-thumb {
border-top: 1px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: var(--dark-grey);
}