jquery-floatheader

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.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jquery-floatheader
111.0.18 years ago8 years agoMinified + gzip package size for jquery-floatheader in KB

Readme

floatheader
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.

Changelog:

Version 1.0.1

Fixed Vertical Table Header

Version 1.0.0

First Release - Fixed Horizontal Table Header
Lets learn how to use it:- Very first we need a table markups as shown below:-

Horizontal Headers

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

Vertical Headers

<table id="vtable" class="tblList">
<tbody>
<tr>
<th>Header#1</th>
<td>Column-2</td>
<td>Column-3</td>
<td>Column-4</td>
<td>Column-5</td>
<td>Column-6</td>
<td>Column-7</td>
<td>Column-8</td>
<td>Column-9</td>
</tr>
<tr>
<th>Header#2</th>
<td>Column-11</td>
<td>Column-12</td>
<td>Column-13</td>
<td>Column-14</td>
<td>Column-15</td>
<td>Column-16</td>
<td>Column-17</td>
<td>Column-18</td>
</tr>
<tr>
<th>Header#3</th>
<td>Column-20</td>
<td>Column-21</td>
<td>Column-22</td>
<td>Column-23</td>
<td>Column-24</td>
<td>Column-25</td>
<td>Column-26</td>
<td>Column-27</td>
</tr>
</tbody>
</table>
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();
});