scrollable table

HTML

<div class="scrollable">
    <table class="thead">
        <colgroup><col width="30%"><col width="40"><col width="60"><col width="40%"></colgroup>
        <thead>
            <tr>
                <th>Cell 1</th>
                <th>Cell 2</th>
                <th>Cell 3</th>
                <th>Cell 4</th>
                <th style="width:16px;">&nbsp;</th>
            </tr>
        </thead>
    </table>
    <div>
        <table class="tbody">
            <colgroup><col width="30%"><col width="40"><col width="60"><col width="40%"></colgroup>
            <tbody class="scrollable">
                <tr>
                    <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs.  Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
                    <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
                    <td>Pages can be displayed either with or without tabs. </td>
                    <td>Pages can be displayed either with or without tabs. Pages can be displayed either...

CSS

div.scrollable > div { overflow-x: hidden; overflow-y: auto; overflow:auto; height: 200px; }
div.scrollable { width: 600px; }

div.scrollable { border-bottom: 1px solid #000000; border-right: 1px solid #000000; }
div.scrollable table.thead th { padding-left: 10px; }
div.scrollable table.thead th, 
div.scrollable table.tbody td { border: 1px solid #000000; }

JavaScript

$(function () {
    var tbody = $("div.scrollable div table.tbody tbody");
    var th = $("div.scrollable table.thead thead tr th");
    var col = $("div.scrollable table.thead colgroup col");
    var td = $("tr:first td", tbody);

    tbody.find("tr:first td").css("border-top", "0px");
    tbody.find("tr:last td").css("border-bottom", "0px");
    th.last().css("border-right", "1px solid white");

    var modifier = $("div.scrollable").width();
    modifier = (modifier - 16) / modifier;
    modifier = 1;
    
    for (var i = 0; i < td.length; i++) {
        var width = td[i].clientWidth + 1;
        //$(th[i]).css('width', width + "px");
        $(col[i]).attr('width', width);

        $(th[i]).html(td[i].clientWidth + " " + th[i].clientWidth);
    }
});