Create Fixed Table Headers with jQuery

Here's the code that I used in the video.

[thebowman]

Thanks this put me on the right track, I dont use a fixed width for my cells so that gave me problems when hiding the header. I fixed it by giving the cells their current width before hiding the header.

[Dr.Stein]

Hi, thanks for tutorial. You do good explaining, and showing the code directly.

[magebol]

Hi, Thanks a lot for this tutorial. I tried to implement it but for some reason the header columns are not keeping the original width... so they take a different size from those columns in the table body... any suggestion? Thanks a lot.

[ankitmohanty]

Please mention how to create Fixed Table Header when horizontal Scrolling is enabled.

[SUMITKAUSHIK]

Buddy by using this i am not able to do horizontal Scrolling

[antonyndungu]

This will not work if the table has horizontal scrolling

[totox]

the table I have to manage was with table-layout:fixed, so I changed a little bit the code like this  :
fixed_thead.css({
fixed_thead.css({
'position': 'fixed',
'top': 0,
'width': table.width(),
'display':'table',
'table-layout': 'fixed',
'z-index' : '9999'
});
  });


to make it working in IE i modified with calculation like this
{
$(this).css('max-width', $j(this).outerWidth());
$(this).css('min-width', $j(this).outerWidth());
});

And to finish, I added a way to make column width changing if window is resized :

$j(window).resize(function(){
var t1 = thead.find("th"),
t2 = fixed_thead.find("th");

t2.each(function (index) {


$(this).css({
"width":w+'px',
"max-width":w+'px',
"min-width":w+'px'

});
})
})


Thank you a lot to show me the way to accomplish that.