jQuery RWD Tables

Tables on websites are useful for displaying data on desktop devices but do not display well on mobile.  So I’ve created a jQuery plugin which makes tables display better on mobile devices by stacking and reorganizing the content of the table.  The plugin is available on GitHub and you can checkout a demo of it here. rwd tables screenshots

I took inspiration from Chris Coyier blog post on Responsive Data Tables in which he demonstrates how we can use CSS to make tables cells behave like blocks on mobile and using CSS generated content, :before, for adding new table headings for mobile.

Rather than using CSS generated content for adding the table headings manually for each table the plugin dynamically grabs the headings you have in your heading and places them correctly for mobile view.

How it Works

The css makes hides the table headings and makes the table cells display like as blocks.  The jQuery function then loops through each table it is passed and wraps the content of each table cell in a <span /> which the css has given a width of 50%.  It then inserts a <span /> with the corresponding heading of the table cell before the cells content. These new mobile headings are then hidden on desktop by css.

You can have a closer look at the code on GitHub.

Summary

I think this is quite a useful tool as many sites use tables for displaying data.  Most CMS systems allow users to add content in tables and the less tech savvy of them will choose this option rather than write their own html and css. This plugin solves enables them to use tables and rest assure that they will be responsive and look great on mobile devices.