Make TBODY scrollable in Webkit browsers

Question

I\'m aware of this question, but none of the answers work in Safari, Chrome, etc.

The accepted strategy (as demonstrated here) is to set the tbody height and overflo

Answer 1

I saw Sean Haddy's excellent solution and took the liberty of making some edits:

• Use classes instead of ID, so one jQuery script could be reused for multiple tables on one page
• Added support for semantic HTML table elements like caption, thead, tfoot, and tbody
• Made scrollbar optional so it won't appear for tables that are "shorter" than the scrollable height
• Adjusted scrolling div's width to bring the scrollbar up to the right edge of the table
• Made concept accessible by
  • using aria-hidden="true" on injected static table header
  • and leaving original thead in place, just hidden with jQuery and set aria-hidden="false"
• Showed examples of multiple tables with different sizes

Sean did the heavy lifting, though. Thanks to Matt Burland, too, for pointing out need to support tfoot.

Please see for yourself at http://jsfiddle.net/jhfrench/eNP2N/