I’ve recently been doing battle with some rather large html tables trying to make them ‘fit’ in my lovely ‘responsive’ design. There are some really cool options available to you depending on the kind of data you want to show. I highly recommend checking out the great collection of approaches put together by Simon Elvery which can be found at his Reponsive Tables demo page. Unfortunately, for various reasons, I ended up having to come up with a different solution. It was so simple and effective that I’m going to share it here.
CSS is Awsome
As we all know, css is awesome but in this case it actually is. The solution I was looking for needed to keep the structure of the table while not breaking out the bounds of the design. The solution was to effectively stop the table being responsive. Essentially wrap the table in a div within the area it should inhabit. Make sure the div width is 100% and set the overflow-x to scroll. So far so easy. The final ‘trick’ is to set a min-width on the table it’s self. This ensures that when view port is too narrow to support the width of the table, rather than the table breaking out of its bounds you get a horizontal scroll (on a PC) and a touch friendly table on other devices (I’ve only tested this on an iPad and iPhone).
I’ve put together a very rough example of this approach using the handy cssdesk.com (jsfiddle for css and html).
You can also wrap these rules in a media query so that the scrolling action only becomes available when the widow shrinks below a certain width.
Use Twitter Bootstrap or some other CSS framework
If you are starting from scratch then I would suggest using twitter bootstrap 3 as they have a very similar solution that is much slicker than my version. If your doing the css your self or framework does not have a solution for responsive tables then you may want to try my approach.
