1

I have a table inside a div with overflow: auto, so I can scroll if it grows larger than page size. Unfortunately, this means that neither tablesorter's sticky header widget nor the sticky table headers plugin works, I'm guessing because they aren't aware that scrolling is occuring. How can I fix this?

chpatrick
  • 461
  • 6
  • 14
  • I cannot provide a helpful answer for this but I experienced exactly that problem with [Roundcube Webmail](http://www.roundcube.net) and the developers told me that there is no way to get a scrolling table with sticky header. – Daniel Böhmer Apr 03 '12 at 13:56
  • there are a lot of questions like this on stakcoverflow: http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table for example. they have a solution with a jquery plugin see this: http://jsfiddle.net/jmosbech/stFcx/ – Tim Apr 03 '12 at 14:09
  • you'll note I mentioned that jquery plugin, and that it didn't work :) I'm thinking about using a CSS approach to make the tbody scrollable which is showing some promise but will take more work – chpatrick Apr 04 '12 at 00:00
  • This is the issue example: https://jsfiddle.net/evgmel/omkhbw1g/ . Unfortunately, I think there is no solution with CSS only for the issue. But using JS `scroll` event does not work well on mobile devices (jumps/leaps of the header are visible). – Evgeny Melnikov Aug 06 '19 at 07:57

1 Answers1

1

A little bit of a shameless plug here, but let me know if Balloon helps you at all:

https://github.com/vhmth/Balloon

Balloon instances allow you to specify the element you scrolling within and will watch on that.

Vinay
  • 6,204
  • 6
  • 38
  • 55