January 22, 2014 11:32 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


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

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

Table structure:

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.

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:
  • Shahbaz Ahmed Bhatti


  • alex enzo

    i like everything on this site … good job 🙂

  • Rajeev Raj

    Does not work in IE