Responsive tables with StackTableJS

Sometimes the tables will break your website because it's too big, even-though you are using bootstrap. Here is the savior:

• Github repository: https://github.com/johnpolacek/stacktable.js/
• Official website: http://johnpolacek.github.io/stacktable.js/

Basically, StackTableJS will transform your horizontal tables into vertical tables (the headers).

0. Download the js and css file from the link above (stacktable.css and stacktable.js).

1. Make sure the table is well-formed:


<table id="mytable">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<tr>
...
</tbody>
</table>

2. Include the stacktable css, add this inside the head tag:

<link href="/js/stacktablejs/stacktable.css" rel="stylesheet" />

3. Include the stacktable js, add this before the body end tag (</body>):

<script src="/js/stacktablejs/stacktable.js" type="text/javascript"></script>
<script type="text/javascript">
        jQuery('#mytbl').stacktable({myClass:'mytbl' });                                                                                                        
</script>

Your table will be as beautiful as following:

a. Normal size:

b. Small screen size: