Responsive tables solution needed

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)

Here is something I tried: codepen.io/alkshendra/pen/YqaYxZ?editors=1100

not semantically same as yours.. but it works.

Thanks for this! I might use this as a starting base, but I reckon I need to change the semantics a bit. I've got a plan B working now (just a scrollable table). Need to present the concepts tomorrow, so I will look into this after the presentation :)

Cool! All the best for the presentation :)

You may use one of these solutions:

exisweb.net/responsive-table-plugins-and-patterns

Thanks, Will have a look into that :) Still fiddling about for now ;)

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.

Oh thank you for this! Checked it just now (on mobile) and it looks solid! Will look at this today! :)

@Asimov500 I've tried it and it works, but it just isn't flexible enough for what I need. See, my data is way more complex and involves having multiple lines in a table cell and David Bushell's solution doesn't cater for that. So it's back to the drawing board I guess... :(

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'm using flexbox more than ever, but not for tables. ;)

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.

Had a look, but the content in my cells goes (has to go) across multiple lines, and all these solutions are made for simple data. Might go for a simple scrollbar for now and see if I can come up with an elegant solution :) Thanks for the links though!

My pleasure. I hope you can figure it out, and share your solution!

Thread

Responsive tables solution needed

Responses(5)

Recent threads

Search Hashnode

Responsive tables solution needed

Responses(5)

Recent threads