I'm working on a page where you can compare several products side by side and I'm having trouble getting it working correctly.
The thing is that the headers (TH) are on the left instead of at the top, and most (all) of the examples of responsive tables I've found have the headers at the top.
Ideally I want the headers to stay fixed on the left side and let the columns with values be horizontally scrollable/swipable. I've been fiddling around with this, but can't keep the correlation in height between the headers and the cells intact.
Does anyone here have an idea on how to solve this?
p.s. Just to show what I have now: http://codepen.io/robertvanderelst/pen/xVWEgG (works in Chrome, not in Firefox)
You may use one of these solutions:
Hi Robert,
The reason I came across this article is because I am always on the lookout for new ideas. Anyway while looking I found this article dbushell.com/2016/03/04/css-only-responsive-tables It seems to do exactly what you are asking. I hope it helps. Not had time to try this myself though.
Look into flexbox. I haven't worked out your solution, but I have done a lot of similar things in flexbox. I have only started using it, but it has solved a lot of layout problems.
I recommend you to pass by this article, and this Chris Coyer article too. And of course, this one that had a great impact on the web. SitePoint has a complete guide about this topic. And here is a demo, just in case. Let me know if it helped.
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
Here is something I tried: codepen.io/alkshendra/pen/YqaYxZ?editors=1100
not semantically same as yours.. but it works.