I have a table with data that I want to keep the header sticky.
The structure of my table is as follows:
HTML
<div class='table' id='table'>
<div class='header row'> <!-- removing row class, although functional, makes it look unattractive -->
<div class='cell'>Col A</div><div class='cell'>Col B</div>
</div>
<div class='row'>
<div class='cell'>x</div><div class='cell'>x</div>
</div>
</div>
Minimal CSS
.table {
display: table;
}
.row {
display: table-row-group; /* removing this, despite functionality, affects aesthetics */
}
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.cell {
display: table-cell;
}
The table appears as desired, but encountering some issues when trying to implement the sticky header feature.
If I remove display: table-row-group; from the row class, the sticky header works, but the table looks unpleasing.
Similarly, eliminating the row class from the header makes the sticky feature operational, yet impacts the visual appeal of the table.
Link to live example: https://jsfiddle.net/mexw58yp/4/
Inquiry
Is there a way to retain the current div-based table structure and still achieve the sticky header effect without using JavaScript, solely via CSS?
Additionally, is there a method to avoid incorporating traditional table elements like table, tr, td, etc.?
Clarification
I am running Chrome version 72. Testing on Firefox seemed fine. Uncertain about the implications of this discrepancy.