Stupid fixed header is a jQuery plugin to create a fixed header on a normal HTML table.
Name | 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 |
$("#tableId").fixedHeader({width:300, height:300})
$("#tableId").fixedHeader({width:300, height:300,
adjustWidth: function(th){
if($.browser.msie){
return $(th).width()-3;
}
return $(th).width();
}
})
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:
This idea is not original. I have read it elsewhere but cannot find the source again. So I do it in jQuery way.
$.fixedHeader.calcWidth
)
But your table may have no border, using separate border collapse, etc.
Use adjustWidth
option to override the default calculation.
/* Firefox 2 */
html>/**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html>/**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
Tested on IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2
Hi, I'm Jacky. Visit my blog at http://jacky.seezone.net, you will find my email there.