I was really chuffed when I managed to create a table that was scrollable in small viewports. But one of the first people I showed it to said "nice, but the first column should be frozen!". I just hate it when people point out the bleeding obvious. Yes, of course the first column should be frozen. But I researched that when I was working on the scrollable table and came to the conclusion that it was boven mijn pet, as we say in dutch. Too difficult for me, in other words.
Still, it continues to rankle. Over the past week I've been researching, finding stuff and trying it out. And ending up messing the entire layout of the page...
Another experiment, this time with pure CSS found on Stack Overflow.
OMG. It's working! It wasn't perfect initially, because the width of cells in the first column varied, depending on the text length (not sure why that happened...).
I worked on it some more, read up on CSS selectors and combinators (very good article), read up on nth-child while I was at it, moved the zebra-stripes down in the css file, and added a fixed width (in pixels) to the first column. I'm not sure using fixed widths in responsive design is good coding practice, but hey! It works!
I am very pleased . Wonder what it looks like on iPhones and Windows phones, though...
|Brum. Plein Vijf||07.46||08.46||09.46||10.46||11.46||12.46||13.46||14.46||15.46||16.46||17.46||18.46|