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.
Sarah
August 23, 2013 at 1:16 pm
Hi! Thanks for creating this plugin. I’m having a weird problem with it though. It works, except what it does is duplicate my thead and so there are two instances of it. It also moves it down too much. I don’t know if this makes a difference but I’m using the Custom Content Scrollbar (http://manos.malihu.gr/jquery-custom-content-scroller/) with it. Any ideas?
rommel
August 23, 2013 at 7:55 pm
Hi Sarah-
Can you provide a link to this quirky functionality in progress so I can investigate first-hand? Off the top of my head, I don’t have a guess as to the issue, nor have I heard anything like that reported before.
Thanks!
Nicolas
November 25, 2013 at 10:56 pm
Hi,
I’ve been trying out your plugin and stumbled upon a problem.
My table contains text input fields with the jquery.ui autocomplete setup.
When I apply thfloat on the table, the autocomplete do not work any more.
If I comment out this line in init function it works :
data.clonetbl.children().remove();
It also works if i change this line above in the same init function from :
clonetbl : $(this).clone(true).attr({id:id}).addClass(‘thfloat-table’).css({zIndex:’1000′,display:’none’,position:’absolute’}).appendTo(‘body’),
to :
clonetbl : $(this).clone().attr({id:id}).addClass(‘thfloat-table’).css({zIndex:’1000′,display:’none’,position:’absolute’}).appendTo(‘body’),
I think I’ll try the second change and see how it goes. I guess it’s ok for me because I don’t have any data or event handlers on the table element itself, but other people could need the `clone(true)`.
just wanted to let you know of this limitation, thank you for sharing this plugin.
rommel
November 25, 2013 at 11:02 pm
Thanks for writing and sharing the solution to your problem, Nicolas.
Hopefully if anyone else is under similar circumstances your fix will come in handy.