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

div.divContainer {
    width: 400px;
    overflow:auto;
}
table.scrollTable {
    border-spacing: 0;
    border: 2px solid black;
}

table.scrollTable thead, table.scrollTable tbody {
    display:block;
}
table.scrollTable tbody {
    height: 100px;
    overflow: scroll;
}
.scrollTable td, .scrollTable th {
    min-width: 150px;
}
tbody {
    border-top: 2px solid black;
}
tbody td, thead th {
    border-right: 1px solid black;
}
tbody td:last-child, thead th:last-child {
    border-right: none;
}
thead, tr, th {
    height: 30px;
    line-height: 30px;
}

JavaScript

$(document).ready(function () {
    $(".scrollTable tbody:first").before("<thead><tr></tr></thead>");
    $(".scrollTable thead tr").append($(".cheader th"));
    $(".scrollTable tbody:first tr:first").remove();
    var width = $('.scrollTable').width();
    var length = $('.scrollTable tr:first th').length;
    $('.scrollTable thead').css("width", (width - 17) + "px");

    var $table = $('table.scrollTable'),
        $bodyCells = $table.find('tbody tr:first').children(),
        colWidth;

    // Get the tbody columns width array
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

    //var tr = $('.scrollTable tbody:first tr:first').clone();
    //$('.scrollTable tbody:first tr:first').remove();
    //$("div.divContainer .scrollTable").before("<table class=\"scrollTable\" cellpadding=\"0\" cellspacing=\"0\" style=\"display:block\"><thead></thead></table>");
    //$("div.divContainer table:first thead").append(tr);
});