Creating Responsive Tables


Creating Responsive Tables

Long gone are the days of table-based designs. We have gone from tables to floating divs to relative positioning to inline and block elements. We are now even graduating from that to flexbox/grid designs. As we move ever forward with our website designs and learn to better display our content, we still have to deal with the cursed "table". Thankfully, these are tables used how they should be, and that makes our job much easier.

Tables As They Should Be

Back in the '90s and early 2000s websites were made up of tables. If you're lucky, you can still see some of these table-based relics today. Every section of a website was cut up into little squares and these squares held either images or content. It was believed lots of little images load faster than few "big" images. This is wrong, but that wasn't the only thing wrong with table-based designs. These designs were bulky, awkward and weren't very accessible for screen readers. Additionally, with the arrival of mobile phones, they couldn't scale to meet different screen sizes. This made them obsolete very quickly.

Even though table-based designs are gone, we still have to work with tables when they organize and display data. Think of an excel spreadsheet. We have rows and columns that separate and organize data. A simple example would look something like this:

Pretty simple. Now let's jazz up that table a little with CSS:

The Problem With Tables

That table looks great on computers, but it doesn't on mobile. Our table is too big for mobile devices so we get a scroll bar. If we want to stop this from happening, we can set the table to have table-layout: fixed but then it looks, well, awful.

Table layout doesn't solve the problem

So, what can we do?

A Solution To Tables

Since we can't cram all the columns into one row, the next idea would to give each column their own row. That's easy. We just have to make all the <td> and <tr> elements full width and change them to block elements. But what about the <th> at the top? Once we scroll down we can't see them anymore. But... what if we removed the title all together? (Resize the box to see it change.)

You're probably thinking, sure, that looks better, but I still don't know what the different columns are. Well, since we can't put them on top of the table, why don't we move them to the side? There's no easy way to do this with HTML so let's do it with JavaScript and CSS pseudo elements.

Now it looks great! Without adding any extra markup, we now have turned our regular tables into responsive tables.

Are there any other ways you'd approach this issue? Tell me about it in the comments below!

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close