Making Tables Responsive - Jamie Johnson
Jamie Johnson
April 26, 2016
What if I have a plain table and I want to make it responsive? Thankfully, SpryMedia's DataTables Table plug-in for jQuery offers responsive tables. Using their plug-in, I have written a "tool" to do the conversion for you. All one has to do is add class="RWDtable" to the table tag and let the code do the rest! However, DataTables are quite picky about there being both a thead and tbody in the table. My tool accounts for those instances as well. Below is a plain table:
| The Phantom Menace | I | PG | 1999 | more data | and more data | and even more data |
| Attack of the Clones | II | PG | 2002 | more data | and more data | and even more data |
| Clone Wars | N/A | TV | 2008 | more data | and more data | and even more data |
| Revenge of the Sith | III | PG-13 | 2005 | more data | and more data | and even more data |
| Rebels | N/A | TV | 2014 | more data | and more data | and even more data |
| Rogue One | N/A | PG-13 | 2016 | more data | and more data | and even more data |
| A New Hope | IV | PG | 1977 | more data | and more data | and even more data |
| Empire Strikes Back | V | PG | 1980 | more data | and more data | and even more data |
| Return of the Jedi | VI | PG | 1983 | more data | and more data | and even more data |
| The Force Awakens | VII | PG-13 | 2015 | more data | and more data | and even more data |
Now, if I add class="RWDtable" to the table tag, then once the code for my tool is involved, the table becomes a responsive table:
| The Phantom Menace | I | PG | 1999 | more data | and more data | and even more data |
| Attack of the Clones | II | PG | 2002 | more data | and more data | and even more data |
| Clone Wars | N/A | TV | 2008 | more data | and more data | and even more data |
| Revenge of the Sith | III | PG-13 | 2005 | more data | and more data | and even more data |
| Rebels | N/A | TV | 2014 | more data | and more data | and even more data |
| Rogue One | N/A | PG-13 | 2016 | more data | and more data | and even more data |
| A New Hope | IV | PG | 1977 | more data | and more data | and even more data |
| Empire Strikes Back | V | PG | 1980 | more data | and more data | and even more data |
| Return of the Jedi | VI | PG | 1983 | more data | and more data | and even more data |
| The Force Awakens | VII | PG-13 | 2015 | more data | and more data | and even more data |
While it uses DataTables, it does not have the search and paging features enabled since it is retaining the original functionality (or lack of functionality) of the table and just making it responsive. However, that would be easy to accomplish by altering the options on the DataTable call.
Here's the code:
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.css"/> <script type="text/javascript" src="//cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.js"></script> <script type="text/javascript" src="//tech.beacondeacon.com/datatable/PlainTableToRWDTableTool.js"></script>
The last line in bold is my actual tool. My recommendation is to download my tool and upload to your site, which you will have to do if you want to alter any of the DataTable options therein. Please keep the comments in tact for my tool.