HomeХобби и стильRelated VideosMore From: Baylor Breaks It Down

Create Fixed Table Headers with jQuery

56 ratings | 10678 views
Here's the code that I used in the video. https://gist.github.com/3354349
Html code for embedding videos on your blog
Text Comments (14)
ANKIT MOHANTY (11 days ago)
Please mention how to create Fixed Table Header when horizontal Scrolling is enabled.
Erich Stein (5 months ago)
Hi, thanks for tutorial. You do good explaining, and showing the code directly.
Baylor Breaks It Down (5 months ago)
Thank you!
Antony Ndungu (6 months ago)
This will not work if the table has horizontal scrolling
Jakub Sluka (8 months ago)
many thanks.
Daniel Watson (2 years ago)
Thanks
Sumit Kaushik (3 years ago)
Buddy by using this i am not able to do horizontal Scrolling
Alain Elineau (3 years ago)
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 thead.find('th').each(function() { $(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) { fixed_thead.width(table.width()) w=t1.eq(index).outerWidth()-1.5 $(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.
Aditi Patade (2 years ago)
any other way to do this? Is it possible to do without using jquery?I m using only css
Aditi Patade (2 years ago)
Alain Elineau hi
thebowman2 (4 years ago)
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.
sarang chaudhari (4 years ago)
thank you for this video
Baylor Breaks It Down (6 years ago)
Thanks! Glad you liked it.
Issaelk (6 years ago)
That's really cool.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.