How can I let a table's body scroll but keep its head fixed in place?
I had to find the same answer. The best example I found is http://www.cssplay.co.uk/menu/tablescroll.html - I found example #2 worked well for me. You will have to set the height of the inner table with Java Script, the rest is CSS.
I found DataTables to be quite flexible. While its default version is based on jquery, there is also an AngularJs plugin.
I saw Sean Haddy's excellent solution to a similar question and took the liberty of making some edits:
- Use classes instead of ID, so one jQuery script could be reused formultiple 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/