Fixed Table with freeze columns

by Suraj Raj Shrestha

HTML

<div style="position:relative; width: 200px;">
    <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>
</div>

CSS

.scrollTable td, .scrollTable th {

    border: 1px solid green;

    text-align: center;

}

.scrollTable thead, .scrollTable tbody {

    display:block;

}

.scrollTable thead {

    width: 383px;

}

.scrollTable tbody {

    height: 100px;

    overflow: scroll;

}

.scrollTable td, .scrollTable th {

    width: 200px;

}

JavaScript

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