Scrollable Table using jQuery

Question

Is there any good and light jQuery plugin out there make Scrollable Tables.

I got one at http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html but that won't working non-IE and non-FF browsers.

Thanks!

Answer 1

If you're looking for light code, skip the jQuery altogether and use pure HTML/CSS:

<table>
    <thead>
        <tr><th>Header Item 1</th><th>Header Item 2</th></tr>
    </thead>
    <tfoot>
        <tr><th>Footer Item 1</th><th>Footer Item 2</th></tr>
    </tfoot>
    <tbody style="overflow-y: scroll; overflow-x: hidden; height: 100px;">
        <tr><td>Item 1-1</td><td>Item 2-1</td></tr>
        ...
        <tr><td>Item 1-N</td><td>Item 2-N</td></tr>
    </tbody>
</table>

The key is in setting the overflow CSS in tbody, so as to make that part scrollable (but not the entire table). You'll also need to set the height, so you can define how tall the scrollable section should be.