Recent news

Monday, 23 May 2016

stacktable.js: jQuery Table Plugin For Stacking Tables on Screens Resolution Change




stacktable.js is a jQuery table plugin. This plugin help on stacking the table content on screen resolution change or on small screen. It Format the table on small screen in a readable format.

How To Use

1. Add the below library reference

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://johnpolacek.github.io/stacktable.js/stacktable.min.js" type="text/javascript"></script>


2. Now add the below html tag.
<table id="simple-example-table" cellspacing="0">
    <tbody>
      <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>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <th>5</th>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>    
    </tbody>
  </table>

3. Add the below code to perform operation

$('#simple-example-table').stacktable();




Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles