CSS Responsive Tables

In this tutorial we're going to look at how we can use tables on responsive layouts and how can we make these tables usable on mobile devices. When tables are on responsive layouts you will find that you face a number of problems such as:

Too many columns

Words overflowing the cells

Column width being too small

If you have a lot of rows, as you scroll you can't see the column headers

In this tutorial we will hopefully fix all these problems by using CSS responsive solution. First we need to create a table we can use to test responsive, so here's a list of the top 5 movies on IMDB.

You'll notice it's just a normal table with an added attribute to the table cells which we can use for the cell titles when the table is responsive all by using CSS. This is because in CSS you have access to display the content of a HTML attribute in pseudo classes of :before and :after using the content property. If we would to view this table on a mobile device it will look like this

As you can see the table isn't really usable on a mobile device and the last column has too much text in it that you can't read things correctly. So now we need to change the table styling on mobile devices by using media queries so that it looks like this.

First we define the media query that we need to use on mobile devices.