I am working on fixing the first column in my table to remain static on mobile devices so that users can easily identify the data they are viewing when scrolling. While the td elements in the table work perfectly as intended, the column header continues to scroll instead of staying in place.
Table layout before scrolling:
https://i.sstatic.net/S14cU.png
Table layout after scrolling:
https://i.sstatic.net/Hs9bs.png
Below is the CSS code that manages devices with a width less than 600px:
@media (max-width: 600px) {
th {
overflow: auto;
}
.first {
position: fixed;
width: 90px;
z-index: 2;
}
.firsth {
position: sticky;
width: 90px;
z-index: 2;
}
}
The Codepen example may be missing the original styles, but I have included it for clarity.