The problem
Let’s say you have a table where you want the first column to remain visible when you scroll horizontally and the header to remain visible when you scroll vertically. In my case I have a table with students and a checkbox for each student, and each date. A sort of attendance matrix. Just use the position: sticky; property in CSS and you are good to go. Check out my CodePen example below.
I’ve used AlpineJS to make populate the table with data. You can use any other framework or vanilla JS to do the same. The important part is the CSS. Watch out for the top, left, and z-index property. They are important to make the side and head bars sticky. The z-index property is important to make the side and head bars appear above the table content.
See the Pen Sticky side/header table by ExoticRoots (@brueningf) on CodePen.