Sticky Table

Sticky Table is a jQuery plugin that gives you the ability to make any table element on your page always stay visible.

Demo

Full Sticky , Sticky Left Top , Sticky Top Bottom , Sticky Top Right , Sticky Left Right

Usage

• Include jQuery & Sticky Table.
• Call Sticky Table.

Create table like hmtl example:

• Class name .sticky-table
• Attribute : data-sticky-top,data-sticky-left,data-sticky-right,data-sticky-bottom

<script src="jquery.js"></script> <script src="sticky.js"></script> <link rel="stylesheet" type="text/css" href="../stickytable.css">  <table class="table-sticky"  data-sticky-top="thead tr"  data-sticky-left="tbody tr td:first-child, tr th:first-child"   data-sticky-bottom="tfoot tr"  data-sticky-rigth="tbody tr td:last-child, tr th:last-child">     <thead>         <tr>             <th>Sticky</th>             <th>header</th>             <th>header</th>         </tr>     </thead>     <tbody>         <tr>            <th>Data</th>            <th>Data</th>            <th>Data</th>         </tr>     </tbody>     <tfoot>         <tr>            <th>Sticky</th>            <th>Footer</th>            <th>Footer</th>          </tr>     </tfoot> </table>

Or Call function sticky(option)

 $('.selector-table').sticky({     top:"",     bottom:"",     left:"",     right:""  });

####Options

• top: selectors row need sticky header.(eg:table tr:first-child)
  
• bottom: selectors row need sticky footer(eg:table tr:last-child)
  
• left: selectors row need sticky Left.(eg:table tr td:first-child)
  
• right: selectors row need sticky Right(eg:table tr td:last-child)
  

Methods

• sticky(options): Initializer. options is optional.
• sticky(): Initializer. options is optional.
• unstick(): Recalculates the element's position.

Events

• sticky-table-start: When the element becomes Sticky Table.
• sticky-table-sucsses: When the element becomes Sticky Table.
• sticky-table-removed: When the element becomes Sticky Table.