<tbody> scrollable

by Ashenvale Poring

HTML

<header>THIS IS A SAMPLE</header>
<div id="tbl_list2">
    <table>
        <thead>
            <tr>
                <td class="tbl_head Dgreen_font" width="120px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="70px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="290px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="80px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="200px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="200px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="200px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="100px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="80px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="80px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="80px">COLUMN<span class="sortblank"></span>
                </td>
                <td class="tbl_head" width="80px">COLUMN<span class="sortblank"></span>
                </td>
    ...

CSS

header {
    width: 100%;
    height: 200px;
}
table {
    background: pink;
    overflow:auto;
    margin-bottom:50px;
}
thead, tbody {
    display: block;
    width: 1051px;
}
tbody {
}

JavaScript

$(function () {
    var windowHeight = $(window).height();
    var divOffset = $('#tbl_list').offset().top;
    var divHeight = windowHeight - divOffset - 20;
    var tbodyHeight = divHeight - $('thead').height();
    $('#tbl_list').css("height", divHeight + "px");
    $('tbody').css({
        "height": tbodyHeight + "px",
        "overflow": "auto"
    });
    var target=$('#tbl_list table tbody');
    $('#tbl_list2 table tbody').scroll(function() {
        target.scrollTop = this.scrollTop;
        target.scrollLeft = this.scrollLeft;
    });
});