As there are lots of plugins to fix/float the table header and they are also included with bunch of options and features. But sometime we do not need all those features, so here in I have written a simple and a light weight plugin which floats the table header. And but obvious we all know why we need floating headers, because our user hate to scroll up and down when there are numbers numbers of records on a page.
FloatHeader is a very light-weight jQuery plugin used to fix the table header. The logic is very simple so that you can tweak as per you requirement. Only a few lines of code, thats it; what else you need.
Fixed Vertical Table Header
First Release - Fixed Horizontal Table Header
Lets learn how to use it:-
Very first we need a table markups as shown below:-
| Header#1 | Header#2 | Header#3 |
|---|---|---|
| Column-1 | Column-2 | Column-3 |
| Column-4 | Column-5 | Column-6 |
| Column-7 | Column-8 | Column-9 |
| Column-10 | Column-11 | Column-12 |
| Column-13 | Column-14 | Column-15 |
| Column-16 | Column-17 | Column-18 |
| Column-19 | Column-20 | Column-21 |
| Column-22 | Column-23 | Column-24 |
| Column-25 | Column-26 | Column-27 |
| Header#1 | Column-2 | Column-3 | Column-4 | Column-5 | Column-6 | Column-7 | Column-8 | Column-9 |
|---|---|---|---|---|---|---|---|---|
| Header#2 | Column-11 | Column-12 | Column-13 | Column-14 | Column-15 | Column-16 | Column-17 | Column-18 |
| Header#3 | Column-20 | Column-21 | Column-22 | Column-23 | Column-24 | Column-25 | Column-26 | Column-27 |
Add styles floatheader.css
Add a reference of jQuery.js either using local path or using cdn.
Then Add floatheader.js plugin.
And Now its time to call the floatheader as here below:-
$(document).ready(function () {
$("table.tblList").floatheader();
});