In this scenario, I have set up two tables where the first one has a sticky header achieved with
position: sticky;
top: 0px;
https://codepen.io/seunje/pen/JjjRVLm
The sticky header works perfectly fine, but there is an issue with scrollbars disappearing! This problem seems to occur only in Chrome.
Is there a workaround available for Chrome?
.container {
height: 50px;
overflow: auto;
}
.table {
display: table;
width: 100%;
}
.tr.sticky-header {
position: sticky;
top: 0px;
}
.td.sticky-header {
position: sticky;
top: 0px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}<div class="container">
<div class="table">
<div class="tr sticky-header">
<div class="td sticky-header">H1</div>
<div class="td sticky-header">H2</div>
<div class="td sticky-header">H3</div>
<div class="td sticky-header">H4</div>
<div class="td sticky-header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>
<div class="container">
<div class="table">
<div class="tr header">
<div class="td header">H1</div>
<div class="td header">H2</div>
<div class="td header">H3</div>
<div class="td header">H4</div>
<div class="td header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>