Tabular content on responsive design

What is your issue?

http://getbootstrap.com/css/#tables-responsive

Wide tables with many columns are a bit of a pain. I've tried both Bootstrap and Foundation, each have their pitfalls as the screen width gets smaller.

You can see how Foundation attempt to solve the problem here... just resize your browser to see the results.

http://zurb.com/playground/projects/responsive-tables/index.html

I've done similar things with Bootstrap by putting the table within a div with css like min-width: 320px; overflow-x:auto;.

This allows the div to scroll horizontally on a small screen, revealing the hidden columns of the table.

@mstnorris bootstrap does not have responsive tables. It just squeezes the cells and that's about it. When user browses the tabular data on small screens the same layout does not work.

@sitesense foundation way is better, but still not perfect.

The cells have to be re-aligned the same way as you would usually go with the layout columns.

From the Bootstrap Docs

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Unless I'm missing your point, what is it that you're after?

Why not just create your own tables using the grid system if you don't want a table to behave like a table.

@mstnorris my point is, to provide the best user experience. Horizontal scrolling is not user friendly especially on small touch-screens. In responsive design you would never-ever use this kind of approach with page layout columns.

I think the only option is to display one table for small screens and another for wider screens. I was only thinking loud if there might be a better workflow addressing this issue.

And i do not use Bootstrap at all...

I deal a lot with big unwieldy tables and my philosophy is, if a user is trying to view large tables on 320 pixel wide smart phone, more fool them :)

It depends on what you're trying to do of course, but if your application demands these types of table then your users should be viewing them at an appropriate screen size.

Would you try to use Excel with such a screen?

I agree with @sitesense which is why I would suggest Bootstrap. They have promoted mobile first design for years now. If your data is best viewed in the form of a table then either keep it as such or modify so that only the bare essentials are shown on smaller screens.