How to create Sticky Table Headers using jQuery

How to create Sticky Table Headers using jQuery

1 2 3

<script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript" src="jquery.stickytableheaders.min.js"></script><script type="text/javascript">// <![CDATA[      $("#stick").<span class="hiddenSpellError" pre="">stickyTableHeaders</span>(); // ]]></script> Home Demos Advertisement Request Tutorials January 22, 2014 11:32 am How to create Sticky Table Headers using jQuery { 3 Comments } inShare9 In this Tutorial you can see how to carry table heading onscroll down and up, in old styles when we scroll page down we forgot what column contain what. I have used jQuery plugin to perform this task very easy to understand and configure in your projects. It helps you to create user-friendly reporting for your website which allow you to read large tables more usable. DOWNLOAD CODEDEMO Usage It’s very simple and short code to understand and easy to integrate: 1 2 3 <script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript" src="jquery.stickytableheaders.min.js"></script><script type="text/javascript">// <![CDATA[      $("#stick").<span class="hiddenSpellError" pre="">stickyTableHeaders</span>(); // ]]></script> Included files and a single line of jQuery to initialize table heading to stick on scroll. Table structure: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <table id="stick">     <thead>   <tr>     <th>Article Title</th>     <th>Social</th>     <th>Tutorial</th>     <th>Demo</th>                                                       <th>Download</th>   </tr>   </thead>         <tbody>   <tr>     <td>How to create Facebook style loading animation using CSS3.</td>     <td width="80px">Like</td>     <td width="80px"><a href="http://www.phpgang.com/how-to-create-facebook-style-loading-animation-using-css_465.html" target="_blank" class="tutorial">Tutorial</a></td>     <td width="80px"><a href="http://demo.phpgang.com/facebook-style-loading-animation-using-css3/" target="_blank" class="demo">Demo</a></td>     <td width="80px"><a href="http://www.phpgang.com/download/download.php?id=Mzk4ODY2NzYuNDg=" target="_blank" class="download">Download</a></td>   </tr>   <tr>     <td>How to create dynamic and animated scroll to top with jQuery.</td>     <td width="80px">Like</td>     <td width="80px"><a href="http://www.phpgang.com/how-to-create-dynamic-and-animated-scroll-to-top-with-jquery_463.html" target="_blank" class="tutorial">Tutorial</a></td>     <td width="80px"><a href="http://demo.phpgang.com/jquery-scroll-back-to-top/" target="_blank" class="demo">Demo</a></td>     <td width="80px"><a href="http://www.phpgang.com/download/download.php?id=MzkyNjM0NDcuMTY=" target="_blank" class="download">Download</a></td>   </tr> </tbody> </table>