To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Jamie Balfour'sPersonal blog

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
Posted by jamiebalfour04 in Web Design
responsive
table
tables
design
css
javascript
js
style
Powered by DASH 2.0 (beta)
Code previewClose