February 27, 2024 5:04 am

How to create Sticky Table Headers using jQuery

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.

How to create Sticky Table Headers using jQuery

[wpdm_file id=65]DEMO

Usage

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

%MINIFYHTML001d1f98123a6b49993fef9cd61b24b710%%MINIFYHTML001d1f98123a6b49993fef9cd61b24b711%%MINIFYHTML001d1f98123a6b49993fef9cd61b24b712%

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.

[wpdm_file id=65]DEMO

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

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

3 responses to “How to create Sticky Table Headers using jQuery”

  1. Shahbaz Ahmed Bhatti says:

    NICE COOOOOOOL CARRY ON BUDDY

  2. alex enzo says:

    i like everything on this site … good job 🙂

  3. Rajeev Raj says:

    Does not work in IE

Leave a Reply

Your email address will not be published. Required fields are marked *