Fork on GitHub

Table Scroll

jQuery.table_scroll plugin adds vertical and horizontal scrollbars to HTML table element.

Features

API

Options:

Example 1 - floating thead, tfoot, and fixed columns.

Demo JabvaScript HTML 
$('table').table_scroll({
    fixedColumnsLeft: 3,
    fixedColumnsRight: 1,
    columnsInScrollableArea: 3,
    scrollX: 5,
    scrollY: 10
});

<table>
    <thead>
        <tr>
            <td rowspan="2"></td>
            <td colspan="2">Author</td>
            <td colspan="3" data-scroll-span="12">Periods</td>
            <td rowspan="2">Price</td>
        </tr>
        <tr>
            <td rowspan="2">First Name</td>
            <td rowspan="2">Last Name</td>
            
            <td>Jan 2013</td>
            ...
            <td>Dec 2013</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>0000</td>
            ...
            <td>0000</td>
            <td>$00.00</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">Total</td>
            <td>0000</td>
            ...
            <td>0000</td>
            <td></td>
        </tr>
    </tfoot>
</table>

Example 2 - floating thead and tfoot.

Demo JabvaScript HTML 
$('table').table_scroll();

<table>
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1 1</td>
            <td>Cell 1 2</td>
            <td>Cell 1 3</td>
            <td>Cell 1 4</td>
        </tr>
        <tr>
            <td>Cell 2 1</td>
            <td>Cell 2 2</td>
            <td>Cell 2 3</td>
            <td>Cell 2 4</td>
        </tr>
        ...    
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
            <td>Footer 4</td>
        </tr>
    </tfoot>
</table>

Example 3 - floating header and footer for table that has tbody only.

Demo JabvaScript HTML 
$('table').table_scroll({
    rowsInFooter: 1
});

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td>Cell 1 1</td>
        <td>Cell 1 2</td>
        <td>Cell 1 3</td>
        <td>Cell 1 4</td>
    </tr>
    <tr>
        <td>Cell 2 1</td>
        <td>Cell 2 2</td>
        <td>Cell 2 3</td>
        <td>Cell 2 4</td>
    </tr>
    ...
    <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
    </tr>
</table>

Example 4 - multi row thead and tfoot.

Demo JabvaScript HTML 
$('table').table_scroll();

<table>
    <thead>
        <tr>
            <td colspan="2">Column 1 - 2</td>
            <td>Column 3</td>
            <td rowspan="3">Column 4</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td colspan="2">Column 2 - 3</td>
        </tr>
        <tr>
            <td colspan="2" >Column 1 - 2</td>
            <td>Column 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1 1</td>
            <td>Cell 1 2</td>
            <td>Cell 1 3</td>
            <td>Cell 1 4</td>
        </tr>
        <tr>
            <td>Cell 2 1</td>
            <td>Cell 2 2</td>
            <td>Cell 2 3</td>
            <td>Cell 2 4</td>
        </tr>
        ...    
    </tbody>
    <tfoot>
        <tr>
            <td rowspan="3">Footer 1</td>
            <td colspan="2">Footer 2 - 3</td>
            <td rowspan="2">Footer 4</td>
        </tr>
        <tr>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
        <tr>
            <td>Footer 2</td>
            <td colspan="2">Footer 3 - 4</td>
        </tr>
    </tfoot>
</table>