iOS Style jQuery Sticky Table Headers/Rows Plugin - Table Section

File Size: 6.08 KB KB
Views Total: 12557
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
iOS Style jQuery Sticky Table Headers/Rows Plugin - Table Section

Table Section is a lightweight jQuery plugin used to make the headers or any rows of an Html table stick to the top of the web page, as you seen on some iOS apps.

How to use it:

1. Place the jQuery library and the table-section.js script at the end of the document so the pages load faster.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/table-section.js"></script>

2. Add the CSS class 'ts-row-section' to the table rows which you want to make them 'sticky'.

<table>

  <thead>
    <tr class="ts-row-section">
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  
  <tbody>
  
  ...
  <tr class="ts-row-section"></tr>
  ...
  
  </tbody>
  
</table>

3. The required CSS for the sticky headers/rows.

.ts-row-fixed {
  position: fixed;
  visibility: hidden;
  z-index: 1020; 
}

4. Call the plugin and use the verticalOffset option to specify the top offset from the viewport.

$(document).ready(function(){
  $(document).tableSection({
    verticalOffset: 60
  });
});

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