Responsive Tables (2)

NEW: CSS only Responsive Tables

See the link above for more recent developments.

My last article on responsive tables was very popular so I’ve only gone and implemented the idea that I was alluding to with horizontal scrolling!

Responsive Tables (2)

See Responsive Tables Demo (2)in a modern browser! Webkit browsers handle both tables perfectly. Firefox & Opera handle the first version. The second version plays with/abuses the flexible box layout and only works with a -webkit- prefix.

I’m confident with more ingenuity I can get this idea working in IE9. Please note: this is far from perfected!

*Update 10th Jan: as the comments below note this technique (as is here) won’t work on a lot of older mobile browsers. Scrolling functionality could be replicated with JavaScript (if the layout works). Feature detection would be needed to make this viable, falling back to a layout like Chris Coyier’s.

Something to consider: once you go block, you can’t go back! Changing the display of a table and its rows & cells to block level is a lot easier than re-implementing the table model with CSS. Important to note because it’s commonly advised to build responsive websites from small to large (think 320 and up). Good advise, though not gospel. I’ve found with tables it may be better to have the larger traditional table version as default and use max-width media queries to scale down. Food for thought, anyway.

I like this concept. Usability is up for debate. Is it intuitive enough? It keeps data side-by-side and doesn’t take up a lot of space. I’m going to keep experimenting — appreciate the feedback so far!

More from me…

Read more on my blog and follow @dbushell. If you like what I do:

Why not hire me!