Skip to main content

The Possibilities and Restrictions of Responsive Web Design: Responsive Data Tables

Posted on April 13, 2012 by nDeHertoghnDeHertogh

As you may have read, I’m a student Interactive Multimedia Design at the college of Mechelen. I’m in my final year, and as all graduates we have to create a final project. Me and my partner have decided to create a mobile website so motorists can pay their parking fee with their phone or tablet. This will be my very first responsive web site I’ve ever made.
There are a couple of things I wish I knew before I started this project and the major one has to be that working together with a city brings a lot of extra difficulties to a project. For instance we HAVE to work together with their ICT department, which basically means we always have to ask for their approval after coding a page (which may take a couple of weeks).

But anyway, we also have to use a couple of tables which are, in hindsight, not that great to work with when you have to use responsive web design. When you want to view a table on a small phone screen you either have to zoom out that much (so you can see the entire table), but you won’t be able to read much because the letters are that small. The other possibility that you have is to zoom in until it’s readable, but than you’ll get those ugly scroller bars and you won’t have a clear view of the rows’ data.
So here’s what we will have to do to create a readable responsive data table. We will actually have to create something that looks like a table, but doesn’t act like a table. First we have to create our ‘normal’ table and fill it with some data (I use five rows, instead of the one you see in the image, filled with fictional information).

Now that we have our table, we will have to check on which point it all goes haywire. In my case it’s when the reaches width about 760px. That’s why I declare the max-width 760px, so the query will have it’s effect for any screen smaller than 760px. We will also specify the width for an iPad in landscape and portrait.

The first thing we will have to do, is to come up with a way to change the tables’ behavior so it won’t act like a table anymore. We can do this by giving all the tags a display:block. Next will have to hide the table header, but for the accessibility later on we can’t use display: none. That’s why we will give it an absolute position and a top and left of -9999px. To see the difference between the rows you can give each table row (tr) a border and if you want it even more clear you can even give it a margin-bottom of 1% or you give it a zebra striping. To give it some zebra striping you just have to use tr:nth-of-type(odd){ background: #color }. Now its time to create your new ‘rows’.

Now it’s time to give the rows new labels. This is pretty easy, you just use nth-child(n) selector. This matches every element that is the nth child, regardless of type, of its parent. So to give the first ‘row’ a new label you just type in td:nth-of-type(1):before{ content: “First Name”; }. Let me explain this a bit. the new row is a td tag. You use (1) because it is the first td you want to give a label. And after content you just write the name of your original label (in my case that’s First Name). The only thing there’s left to do is to let the newly made labels act like table headers.

Now your have a responsive table, that shows a normal table on a desktop with a screen bigger than 760px (left image) and will show the other table when the screen is smaller than 760px or when you view it on a iPad (right image).



Image of anand kumar
anand kumar
8 years ago

great responsive layout tutorial. thanks!

Image of Nicholas Mathew
Nicholas Mathew
4 years ago

A fantastic tutorial for responsive layout. It is very useful for the web development company and for their entire team. Nowadays it is mandatory to have responsive web design otherwise it will affect the ranking in SERP.Good Work.Thanks for posting.

Image of Alasdair
6 months ago

Nice tutorial. thanks, really helpful!

Leave a Reply

Your email address will not be published. Required fields are marked *