Sticky table header in 'overflow: auto' divs

Did you get anywhere with this? I'm running up against it myself and am about to break open the sticky-headers JS for repurposing...

I knocked together a quick and dirty jQuery using some nabbed code from tableheader.js. Most of that file seems to be about watching scroll activity so it can make the sticky header visible when the table reaches the top of the page - without that (ie, for a fixed position header) it's quite straightforward.

Here's what I ended up with:

$(document).ready( function() {
  $('.scrolly table thead').each( function() {
    $(this).find('th').each( function() {
      $(this).css('width', $(this).width() +'px');
    });
    var headerClone = $(this).clone(true).insertBefore(this.parentNode).wrap('<table></table>').parent().css({
      position: 'fixed',
      width: $(this).width() + 'px'
    });
  });
});

'.scrolly' is obviously my container, use your own identifier to make it work with your theme.
the 'var headerClone' line is what I stole from tableheader.js, though I dropped the 'top: 0px' declaration. Before that, though, I added a step through each of the TH elements in the header to give a firm CSS-declaration to set their 'width' to match their current naturally-derived width. This is purely because my table's cell widths are all set to auto ... it looks like tableheader.js does something similar, but it uses clientWidth instead of width() - this may be to do with borders or padding or Internet Explorer.

I'm experiencing some unusual IE behaviour (as always), but the above may at least give people a starting point...

Changing 'fixed' to 'absolute' seems to have fixed my IE issues ... and kind of makes sense, I don't want the thing to be fixed when the page scrolls, I just want to to remain absolutely positioned where it is when the current scroll area scrolls.

I came across this same problem on my site and thought I'd have a crack at a solution. Not even knowing if one was possible, this was a bit of trial by fire.

I know very little about JS so this was my first real tackle at it. I've not tested this extensively but I managed to get this working to my liking (at least in firefox). Instead of

<?php drupal_add_js('misc/tableheader.js'); ?>
<table class="sticky-enabled">

I have used my own script

<?php drupal_add_js('sites/default/themes/oudc/scripts/tableheader-supplement.js'); ?>
<div class="scroll-sticky-enabled">
<table class="sticky-enabled">

*note the scrollable div now has to have an identifying class aswel

Attached is the contents of that js file. Its virtually identical to the ordinary Sticky Tableheaders JS but I've littered it with minor alterations here and there and kinda lost track of what I have and havent done. Let me know what you guys think.

My apologises, found a careless bug. The below is fixed.

...and another.

Unfotunately it didn`t work for me ;(

Firebug gives the following mistake:
this.originalContainer.offset() is null

It there a way to fix this? Thanks a lot..

This is just a normal bug.

Please provide steps to reproduce, ideally with screenshots.

I`m sorry but maybe my problem is not strictly the same so i created a new issue:

http://drupal.org/node/1429048

Thank you