Nicescroll on a table body with fixed table headers

Demonstrates how to get what looks like Nicescroll scrolling only a table body with the table header staying in place.

by bizamajig

HTML

<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<div id="tableHead">
    <table id="tHead">
        <colgroup>
            <col class="colOne"></col>
            <col class="colTwo"></col>
            <col class="colThree"></col>
        </colgroup>
        <th>English</th>
        <th>Japanese</th>
        <th>Italian</th>
    </table>
</div>
<div id="tableBodyScroll">
    <table id="tableBody">
        <colgroup>
            <col class="colOne"></col>
            <col class="colTwo"></col>
            <col class="colThree"></col>
        </colgroup>
        <tr>
            <td>one</td>
            <td>一 / ichi</td>
            <td>uno</td>
        </tr>
        <tr>
            <td>two</td>
            <td>二 / ni</td>
            <td>due</td>
        </tr>
        <tr>
            <td>three</td>
            <td>三 / san</td>
            <td>tre</td>
        </tr>
        <tr>
            <td>four</td>
            <td>四 / shi</td>
            <td>quattro</td>
        </tr>
        <tr>
            <td>five</td>
            <td>五 / go</td>
            <td>cinque</td>
        </tr>
        <tr>
            <td>six</td>
            <td>六 / roku</td>
            <td>sei</td>
        </tr>
        <tr>
            <td>seven</td>
            <td>七 / shichi / nana</td>
            <td>sette</td>
        </tr>
        <tr>
            <td>eight</td>
            <td>八 / hachi</td>
            <td>otto</td>
        </tr>
        <tr>
            <td>nine</td>
            <td>九 / kyuu</td>
            <td>nove</td>
        </tr>
        <tr>
            <td>ten</td>
            <td>十 / juu</td>
            <td>deci</td>
        </tr>
    </table>
</div>

CSS

th, td {
    border: 1px solid #CCC;
}
#tableHead {
    width: 360px;
}
#tableBodyScroll {
    overflow:hidden;
    height: 100px;
    width: 360px;
}
.colOne {
    width: 100px;
}
.colTwo {
    width: 150px;
}
.colThree {
    width: 100px;
}

JavaScript

$(document).ready(function () {
    $("#tableBodyScroll").niceScroll();
});