In this Tutorial you can see how to carry table heading on scroll 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.

Usage

It’s very simple and short code to understand and easy to integrate:

%MINIFYHTMLa97d6916f670cb45873bfb16f1a10aa250483d9b73588d95850ae92a5772c2dfbeb9a414a38c0a3c6bf59ca9d358fda72494d155f2b1fb77b02457b57ca8bec610%%MINIFYHTMLa97d6916f670cb45873bfb16f1a10aa250483d9b73588d95850ae92a5772c2dfbeb9a414a38c0a3c6bf59ca9d358fda72494d155f2b1fb77b02457b57ca8bec611%%MINIFYHTMLa97d6916f670cb45873bfb16f1a10aa250483d9b73588d95850ae92a5772c2dfbeb9a414a38c0a3c6bf59ca9d358fda72494d155f2b1fb77b02457b57ca8bec612%

Included files and a single line of jQuery to initialize table heading to stick on scroll.

Table structure:

<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="https://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="https://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="https://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="https://www.phpgang.com/download/download.php?id=MzkyNjM0NDcuMTY=" target="_blank" class="download">Download</a></td>
  </tr>
</tbody>
</table>

You have to define a table id which you want to stick on top and you must add a <thead></thead> tag to recognize head of table without head table it won’t work.

I hope you like this very simple and easy to understand tutorial and please comment your ideas and improvement in our tutorials.