How to create a Scrollable Table in Google Chrome

Question

Ok so this is basically about scrollable tables.

If I have a table element I can make the content scrollable (with some javascript fun, including accouting for the scroll bar using the width) by making the thead fixed height, and the tbody fixed height, then setting scrolling to auto on the tbody.

This works in Firefox, but in google chrome the heights on the thead/tbody are ignored and the whole table grows vs scrolling as intended.

Is there a css solution that can be applied to the table to make this work in google chrome as well? Or do I need to make the header one table, the body a different table, ensure the column widths using js or css and have the parent of the body table scroll with it's content?

Answer 1

Here is a complete solution that should work ( using jQuery) You will need to have two tables each one in a separate div element. Each table will have the same thead section. Only contentTable will have the tbody section

<div class="scrollableTable"
    <div>
        <table class="headerTable">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
        </table>
    </div>
     <div style="height:240px; overflow:auto;">
        <table class="contentTable" style="width:100%; margin-top:-20px;">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value 1</td>
                    <td>value 2</td>
                    <td>value 3</td>
                </tr>
                <tr>
                    <td>value 4</td>
                    <td>value 5</td>
                    <td>value 6</td>
                </tr>
                ....
            </tbody>
        </table>
    </div>
</div>

Then, you will have to call this function each time the data is changed :

ResizeWidths($('.scrollableTable'));


function ResizeWidths(div)
{
    var headerCells =  $(div).find('.headerTable thead').find('th');
    var contentCells = $(div).find('.contentTable thead').find('th');
    for(var i =0, ii = headerCells.length;i<ii;i++)
    {
        if($(headerCells[i]).width()!=$(contentCells[i]).width())
            $(headerCells[i]).width($(contentCells[i]).width());
    }
}