This article will show a you a quick and easy way to make Tables more Responsive with WordPress.

When we searched for documentation on this specific area of web design and development, we didn’t find much on the topic. Chris Coyier has a nice round up on the subject but because Responsive Design is still somewhat of a new concept there’s no “official spec” available (yet?).

So we were a bit stumped – our project didn’t call for something as grand as some of the examples available and we just wanted an easy solution for our WordPress themes that when implemented provided a way for tables to react with our responsive framework.

Looking at the examples provided gave us some ways of using CSS3 and Javascript to dial in what the tables should look like on a mobile device, but it wasn’t quite the answer we needed. All we were looking for was a way to wrap a table with an invisible box that would flex with the responsive layout of the website.

That was it! A Wrap! We pushed all of the technical mumbo-jumbo aside and went back to an older CSS method called Overflow! We wrapped a table in a div and give it a style of overflow:auto; – a style that is friendly in all browsers.

What comes next is a little bit of Javascript that looks for any table element and wraps the table in a div with a class of overflow. The reason we don’t style the div within the script is because we want to trigger the overflow only at certain screen ratio’s. This is where our media queries comes into effect.

If you’re not using a responsive framework of some sort, this will have another effect on your website. But hey, give it a try regardless and let us know what you come up with! This was our method we used to give a blanket solution to random problem.

If you have a question or want to comment, share your thoughts with us below.

Remember, We’re here to help! Bowe is a Toronto based web and graphic design company that offers affordable website design packages which allow you to manage your business online easily. We create user friendly websites and connect you to your social media pages. Feel free to ask us a question below or contact us directly.