Scroll Table Body is a cross-browser lightweight jQuery plugin that allows an html table body to scroll while the header and footer stay fixed. It works with cells that span multiple columns (colspan), horizontal scrolling, and with fixed width or fluid tables, even when you resize! It supports IE8+, and similarly recent versions of Firefox, Chrome and Safari.
- Load jQuery
- Optional: load Underscore.js or Lodash.js if you want to debounce when resizing
- Load the Scroll Table Body plugin
- Make sure you have a table with proper markup (
<thead>
,<tbody>
, and<tfoot>
if you want it) - Call
.scrollTableBody()
on your table element, which by default displays 10 rows of your table and scrolls the rest - Optional: pass
rowsToDisplay
as an option. For example,$('table').scrollTableBody({rowsToDisplay:5});
Check the demo folder for examples.