Stacking Tables On Small Screens with jQuery - stacktable

Stacking Tables On Small Screens with jQuery - stacktable
File Size: 48.3 KB
Views Total: 10693
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

stacktable.js is a jQuery Plugin for equalizing the height or width of elements. With this plugin, the wide tables will be converted to a format that works better on small screens.

How to use it:

1. Markup

<a id="run" href="#">run »</a>
<table id="simple-example-table" cellspacing="0">
<tr align="left">
<th width="30%">Stuff</th>
<th width="12%">Rate</th>
<th width="12%">Amount</th>
<th width="12%">Points</th>
<th width="12%">Number</th>
<th width="18%">Type</th>
<th width="12%">Name</th>
<td>Something Else</td>
<td colspan="7" class="sub">Subgroup Header</td>
<td>Another Thing</td>
<td>Gym Shoe</td>
<td>Thing w/Less Stuff</td>
<td>Last Thing</td>
<td>Meaning of Life</td>

2. Include jQuery library and stacktable.js

<script src="//"></script> 
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')</script> </script> 
<script src="stacktable.js" type="text/javascript"></script> 

3. Call the plugin

  $(document).on('click', '#run', function(e) {

Change logs:


  • Adding support for thead as first row


  • bugfix


  • bugfix


  • deprecate unnecessary hideOriginal setting
  • v1.0.1



  • add card table function


  • Added support for headIndex, in order to choose what cell use as header.
  • Some variable name changes (the two "index" became "rowIndex" and "cellIndex", in order to avoid ambiguities).


  • fixed documentation on index.html; class variable should be myClass
  • remove unused var.

This awesome jQuery plugin is developed by johnpolacek. For more Advanced Usages, please check the demo page or visit the official website.