<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;
}
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-y": "auto"
    });
    var target=$('#tbl_list');
    $('#tbl_list2').on("scroll",function(){
        this.scrollTop = target.scrollTop;
        this.scrollLeft = target.scrollLEft;
    });
});