Stupid fixed header

Stupid fixed header is a jQuery plugin to create a fixed header on a normal HTML table.

Sample

Name Email Added Date Address Description Position Color URL
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com
Test Name Test Email 16-OCT-2008 123 XXX YYY Buildings, SyZ Street, Hong Kong Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex #CCFFAA http://www.test.dafdfdf.com

Features

Source

Current version: 1.0.3 jquery.fixedheader.js (require jQuery 1.2.6)

Change log

Usage

e.g.
$("#tableId").fixedHeader({width:300, height:300})

Option:

Why is it 'stupid'?

There are many ways to create a fixed header in a table. This one is stupid as it does so many things to achieve this little effect:

  1. create extra divs to wrap table up
  2. cloning current table header
  3. put the cloned table header on top of the current table
  4. synchronize width of each cell
  5. synchronize scroll position when scrolling

This idea is not original. I have read it elsewhere but cannot find the source again. So I do it in jQuery way.

Limitation

Compatability

Tested on IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

About Me

Hi, I'm Jacky. Visit my blog at http://jacky.seezone.net, you will find my email there.