Fixed Table with freeze columns

by Suraj Raj Shrestha

HTML

<table cellspacing="0" cellpadding="0" class="scrollTable">
    <tbody>
        <tr class="cheader">
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
        </tr>
        <tr>
            <td>Data21</td>
            <td>Data22</td>
            <td>Data23</td>
            <td>Data24</td>
            <td>Data25</td>
        </tr>
        <tr>
            <td>Data31</td>
            <td>Data32</td>
            <td>Data33</td>
            <td>Data34</td>
            <td>Data35</td>
        </tr>
        <tr>
            <td>Data41</td>
            <td>Data42</td>
            <td>Data43</td>
            <td>Data44</td>
            <td>Data45</td>
        </tr>
        <tr>
            <td>Data51</td>
            <td>Data52</td>
            <td>Data53</td>
            <td>Data54</td>
            <td>Data55</td>
        </tr>
        <tr>
            <td>Data61</td>
            <td>Data62</td>
            <td>Data63</td>
            <td>Data64</td>
            <td>Data65</td>
        </tr>
        <tr>
            <td>Data11</td>
            <td>Data12</td>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
        </tr>
        <tr>
            <td>Data11</td>
            <td>Data12</td>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
        </tr>
    </tbody>
</table>

CSS

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: solid 1px lightblue;
    text-align:center;
}

JavaScript

$(document).ready(function () {
    $(".scrollTable tbody:first").before("<thead><tr></tr></thead>");
    $(".scrollTable thead tr").append($(".cheader th"));
    $(".scrollTable tbody:first tr:first").remove();
});

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});