Looking to enhance my company's internal data table component with sticky headers, I found a solution that works well in Chrome without disrupting other features. Here is the generated code:
<table class="headers">
<thead> // ... header stuff</thead>
<tbody> // ... body stuff</tbody>
</table>
<div class="scrollBody">
<table class="headers">
<thead> // ... header stuff</thead>
<tbody> // ... body stuff</tbody>
</table>
</table>
The corresponding CSS code looks like this:
th {
border: 1px solid black;
}
.headers tbody {
visibility: collapse;
}
.scrollBody thead {
visibility: collapse;
}
.scrollBody {
display: inline-block;
max-height: 250px;
overflow: auto;
}
While this setup works perfectly in Chrome, IE presents an issue by adding an extra scrollbar to the page. This results in two scrollbars, one for the table body and another for the entire page.
If you'd like to see the code in action, check out this CodePen link: https://codepen.io/petetalksweb2/pen/WyeaWL?editors=1100
Any assistance on resolving this issue would be greatly appreciated.