We all know that responsive designs are the way to go. For a long time now my website has been fully responsive, but one of the features I used that was developed by someone else was the responsive table. For as long as I have had it in use on my website I have disliked it.
I dislike it because it shifts the first column of the table to the left, essentially floating it above the rest of the table, whilst letting the user scroll the rest of the table. It created an ugly, ugly mess of things being thrown all over the place. Alas, finding the best solution for a responsive table could be much easier.
What about using an overflow:auto and display:block on it? Good idea, but the problem is that now the tables will not stretch the full width of the container.
The solution I am now using is a combination of JavaScript and CSS. The solution involves using jQuery's wrap function like so: jQuery("table.responsive").wrap("<div style="overflow: auto;"></div>");which will wrap each table with the class responsive in a scrollable div (see, very little CSS and JavaScript). Also, by giving the table inside a minimum width of 100%, they will always stretch the width of their container (which is the wrapper div), ensuring that they are always 100% of the content.
The problem though is with the interaction design side of things - how are users supposed to know when they can scroll some table in the middle of the content?
After reading a few articles, I found a comment in one of the websites with a link to this page. This allows you to make scrollbars always visible - something that should not need to be hacked together but should be a CSS feature, but Apple and Google don't agree with this so we do need to hack it together.
Although this does not guarantee that users will notice the scrollbars, it does leave some possibility that they might notice them.
Tables are a difficult thing to work with and making them responsive is one of the most difficult things to do in terms of usability. Let me know if you have any solutions to these problems.
Here is an example table, resize your browser or use a smartphone to test it.
| Name | Platform | Year | Sales | Revenue |
|---|---|---|---|---|
| Warcraft: Orcs and Humans | MS-DOS and Mac OS | 1994 | 1,100,000 | $45,000,000 |
| Warcraft II: Tides of Darkness | MS-DOS, Windows, Macintosh, Saturn, PlayStation | 1996 | 1,000,000 | $50,000,000 |
| Warcraft III: Reign of Chaos | Windows and Mac OS | 2002 | 3,000,000 | $175,000,000 |
| Warcraft III: The Frozen Throne | Windows and Mac OS | 2004 | 5,000,000 | $95,000,000 |
