Saneef
Saneef

Reputation: 8920

Scrollable Table using jQuery

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!

Upvotes: 4

Views: 37639

Answers (2)

Graeck
Graeck

Reputation: 1366

Here's one that works well: http://www.farinspace.com/jquery-scrollable-table-plugin/

And since it was mentioned above, here's a pure HTML/CSS cross-browser solution: http://www.imaputz.com/cssStuff/bigFourVersion.html

Upvotes: 4

Dan Lew
Dan Lew

Reputation: 87440

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.

Upvotes: 6

Related Questions