Fixed Table with freeze columns

by Suraj Raj Shrestha

HTML

<div class="divContainer">
    <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

div.divContainer {
    width: 400px;
    overflow:auto;
}
.scrollTable{    
    margin: 0;
    padding: 0;
}

.scrollTable td, .scrollTable th {
    border: 1px solid green;
    text-align: center;
    min-width: 150px;
}
.scrollTable thead, .scrollTable tbody {
    display:block;
    
    top: 0;
    left: 0;
}

.scrollTable tbody {
    height: 100px;
}

.scrollTable td, .scrollTable th {
    min-width: 150px;
}

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();
    //var width = $('.scrollTable').width();
    //var length = $('.scrollTable tr:first th').length;
    //$('.scrollTable thead').css("width", (width - 17) + "px");
    
    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);
});