Development, Tools, Tutorials, HTML

Easily make your tables responsive with JS/CSS

I'm in the middle of building a responsive CRM when I realised it all works great except for the tables I needed to find a viable solution to this problem, after a little Googling I came across an excellent solution from the guys behind the Foundation front-end framework.

Their solution for Responsive Tables works like a charm instead of removing columns as the viewpoint gets smaller it puts the first column essential on top and the rest are positioned to the right allowing you to scroll vertically through the table even on very small screens check out their Demo to see it in action.

To implement their solution include their responsive CSS and JS file:

<link rel="stylesheet" href="css/responsive-tables.css" type="text/css">
<script type="text/javascript" src="js/responsive-tables.js"></script>

Then add a class of responsive to any table you want to make responsive:

<table class="responsive">

That's it its all ready to use!

I've only just started using it but so far it seems like a solid solution. If you know of others of have thoughts on this let me know in the comments.

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.