Cloned Table header column width and original tbody column width misaligned when data is loaded dynamically from json

Question

I am working with html,jQuery, JSON and came across following task where I need to freeze the table header. I have tried many plugins to freeze the header but the issue is that as the tbody is getting populated with json data thru an ajax call in jQuery the width of cloned table header and original width of the columns in the tbody is not aligned.. I m posting the code below, kindly some one tell me where I am going wrong .

HTML part:

<div style="width:300px">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>
<th> Column</th>                
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>

CSS style used:

#tblNeedsScrolling {
font-weight: normal;
text-align: center;
border-collapse: collapse;
}
#tblNeedsScrolling td, #tblNeedsScrolling th {
width:50px;
    font-size: 11px;
    border: 1px solid #B9B9B9;
    padding: 3px 7px 2px 7px;
}
#tblNeedsScrolling th {
width:50px;
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
}
#tblNeedsScrolling tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}

jQuery script:

function scrolify(tblAsJQueryObject, height) {
    var oTbl = tblAsJQueryObject;
    var oTblDiv = $("<div/>");
    oTblDiv.css('height', height);
    oTblDiv.css('overflow', 'scroll');
    oTbl.wrap(oTblDiv);
    // save original width
    oTbl.attr("data-item-original-width", oTbl.width());
    oTbl.find('thead tr td').each(function() {
        $(this).attr("data-item-original-width", $(this).width());
    });
    oTbl.find('tbody tr:eq(0) td').each(function() {
        $(this).attr("data-item-original-width", $(this).width());
    });
    // clone the original table
    var newTbl = oTbl.clone();
    oTbl.parent().parent().prepend(newTbl);
    newTbl.wrap("<div/>");
    // remove table header from original table
    oTbl.find('thead tr').remove();
    // remove table body from new table
    newTbl.find('tbody tr').remove();
    // replace ORIGINAL COLUMN width                
    newTbl.width(newTbl.attr('data-item-original-width'));
    newTbl.find('thead tr td').each(function() {
        $(this).width($(this).attr("data-item-original-width"));
    });
    oTbl.width(oTbl.attr('data-item-original-width'));
    oTbl.find('tbody tr:eq(0) td').each(function() {
        $(this).width($(this).attr("data-item-original-width"));
    });
}
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data) {
            var addition = '';
            $.each($(data.response), function(i, d) {
                var row = '<tr>';
                $.each(d, function(j, e) {
                    row += '<td>' + e + '</td>';
                });
                row += '</tr>';
                $('#table_body').append(row);
            });
            scrolify($('#tblNeedsScrolling'), 160);
        }
    });
});

Answer 1

Try making the following changes,in the

HTML part:-

 <div style="width:1000px; height:400px; overflow:scroll">
    <table border="1" width="100%" id="tblNeedsScrolling">
    <tr>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>
    <th> Column</th>                
    </tr>
    <tbody id="table_body">
    </tbody>
    </table>
    </div>

CSS part:-

#tblNeedsScrolling {
table-layout: fixed;
font-weight: normal;
text-align: center;
border-collapse: collapse;
}
#tblNeedsScrolling tr td, #tblNeedsScrolling td {
font-size: 11px;
border: 1px solid #B9B9B9;
padding: 3px 7px 2px 7px;
}
#tblNeedsScrolling thead td {
font-size: 12px;
text-align: center;
padding-top: 5px;
padding-bottom: 4px;
}
#tblNeedsScrolling tr.alt td {
color: #000000;
background-color: #EAF2D3;
}

#tblNeedsScrolling thead tr td
{
width:50px ! important;
}


#tblNeedsScrolling tbody tr td
{
width:50px ! important;
}