I recently found myself in need of an elegant, simple solution allowing users to know which column in a table contained which value once the table header has scrolled out of view.
A quick google lead me to believe that no such plugin for jQuery currently exists. I did find a few table-centric plugins that (maybe) include the kind of functionality that I wanted, but nothing looked to provide just what I had in mind. So, I started working on the plugin myself.
I call the plugin TH Float, but it could also aptly be named Sticky Table TH or Fixed THEAD / TFOOT. What it does is make the <thead> or <tfoot> of a table remain floating in view at the top or bottom, respectively, of the scrollable container until the table is completely out of view.
I’ve thrown together a simple info page and demo: TH Float jQuery Plugin. It’s really simple to use and from my tests works identically and flawlessly in (most?) all browsers (though, interestingly, I did discover an obscure bug in IE8 while creating the demo page).
If you have any comments, suggestions, or problems with the plugin, please feel free to let me know!
Adrian
August 8, 2011 at 8:59 pm
It doesn’t appear to work in IE7
rommel
August 8, 2011 at 9:08 pm
Do you have an example page where it’s broken, or is it the demo page you’re having trouble with? The demo works as expected (with minor aesthetic issues) in IE7.
Thanks for the feedback.
Daniel
August 9, 2012 at 1:31 am
Hi.
It doesnt work well with 2 tables in the same page.
I add a calling in footer like
j(".tablebig").thfloat();and did strange things…. Any ideas?
Pretty nice job. I love it, but i must to resolve this issue if i want use it.
Thanks!
rommel
August 9, 2012 at 7:22 am
Hi Daniel- Thanks for pointing this out. I’ve implemented a fix in v0.4, which you can get on the plugin page now.
Daniel
August 10, 2012 at 2:28 am
Great! I’ll try soon.
I´ve also seen, if it helps, that you can not hide it in the print view. The stylesheet is overwritten in execution time and all the attributes have been blocked: visibility, display … It would be good liberate ‘visibility’ in order to declare in the print stylesheet and it does not overlap on the printout.
A greeting and thank you for this useful plugin.
rommel
August 10, 2012 at 7:18 am
Thanks again, Daniel. I’ve added a new “noprint” option which is true by default, but can be set to false if you want the block to print. You might need it visible if you have a scrolling div and you want the columns labeled. For example, see the demo page.
Daniel
August 12, 2012 at 10:05 pm
Well, I dont know what to say…
If I see more attributes that can improve the plugin does not hesitate to tell you.
Thank you very much, rommel!!
Saulo Benigno
December 5, 2012 at 3:42 am
Thank you very much for this plugin, worked for me and helped me a lot
Robert
January 7, 2013 at 10:07 am
Like Adrian’s comment before, the demo doesn’t demonstrate any floating THEADER section at all. All of the divs simply scroll the content, and the header stays at the top of the scrolling content, moving out of view.
I know that was over a year and half ago that Adrian’s comment was posted, but thought you’d like to know that under ie7, it doesn’t appear to work.
rommel
January 16, 2013 at 2:11 pm
Thanks for reporting, Robert.
I’m curious to see a screenshot of this issue in action. Every time I’ve tried it in IE7 (and I just tried it again), everything works fine.
I’m using IE9′s developer tools to load the page in IE7 mode, I’m not using an actual IE version 7 browser, so it’s possible that has something to do with it.