Doing Responsive Tables

Not that many years ago, we were using tables for layout in our designs.

This was the best option we had for forcing elements to be in specific positions on the page. Of course, now we wouldn't dream of using tables for layout in our designs. Tables are terrible and we chastise ourselves for even thinking they were good ... right? *tongue firmly planted in cheek*

Seriously, nowadays we use tables for their original purpose - displaying tabular data. Situations where we have tabular data with rows and columns and data. Tables are easy to read and give us a lot of flexibility to show large amounts of data in a way that conserves real estate.

In recent times, our audiences have got up from their desktop computers and are now much more mobile. This means that we can't count on the fact that a person browsing our site has the luxury of a large screen to see our 20 column by 100 row table. If a person is browsing our site on a phone, that 20 column table is either too small to read intelligibly or scrolls horizontally off the screen. Neither of these options are particularly attractive.

So, what do we do with tables when the real estate available is small? This is where the term Responsive Tables comes in.

The issue that we want to workaround is that table cells are block elements. That is, the default layout attribute of these elements is block which equates to display: block. This becomes an issue when the viewport gets small (eg phone or handheld device) and there is not enough room to show all table columns across the page. There are a number of options like:

• Use javascript to hide some of the columns, hence reducing the width of the table - this could work but the viewport settings may mean that the text in the table is quite small and difficult to read.
• Use CSS to hide columns based on breakpoints - this is a similar approach to the first point. It just uses CSS instead of Javascript. It would involve putting a class on the columns that you want to hide and at a certain breakpoint, hide the elements that have that class.

Chris Coyier from CSS Tricks has a great article on this. Essentially, he is saying that we need to make tables NOT behave like a table at certain viewport sizes. It's a great read, so take the time to have a look.

Til next time ...