Jquery 从json动态加载数据时，克隆的表标题列宽和原始tbody列宽未对齐

我正在使用html、jQuery、JSON，遇到了下面的任务，需要冻结表头。 我尝试了许多插件来冻结标题，但问题是，由于tbody通过jQuery中的ajax调用使用json数据填充，因此克隆表标题的宽度与tbody中列的原始宽度没有对齐。。 我把代码贴在下面，请有人告诉我哪里出了问题

HTML部分：

<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>

jQuery脚本：

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);
        }
    });
});

函数scrolify（tblAsJQueryObject，高度）{
var oTbl=tblAsJQueryObject；
var oTblDiv=$（“”）；
oTblDiv.css（“高度”，高度）；
css（'overflow'，'scroll'）；
oTbl.包装（oTblDiv）；
//保存原始宽度
oTbl.attr（“数据项原始宽度”，oTbl.width（））；
oTbl.find（'thead tr td'）。每个（函数（）{
$（this.attr（“数据项原始宽度”，$（this.width（））；
});
oTbl.find（'tbody tr:eq（0）td'）。每个（函数（）{
$（this.attr（“数据项原始宽度”，$（this.width（））；
});
//克隆原始表
var newTbl=oTbl.clone（）；
oTbl.parent（）.parent（）.prepend（newTbl）；
新包装（“”）；
//从原始表格中删除表格标题
oTbl.find（'thead tr'）.remove（）；
//从新表中删除表体
newTbl.find（'tbody tr'）.remove（）；
//替换原始列宽
newTbl.width（newTbl.attr（'data-item-original-width'）；
newTbl.find（'thead tr td'）。每个（函数（）{
$（this.width（$（this.attr（“数据项原始宽度”））；
});
oTbl.width（oTbl.attr（'data-item-original-width'）；
oTbl.find（'tbody tr:eq（0）td'）。每个（函数（）{
$（this.width（$（this.attr（“数据项原始宽度”））；
});
}
$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:url，
数据类型：“json”，
成功：功能（数据）{
var加法=“”；
$。每个（$（data.response），函数（i，d）{
var行=“”；
$。每个（d，函数（j，e）{
行+=''+e+''；
});
行+=''；
$（“#表体”）。追加（行）；
});
阴囊（$（'tblneedscrolling'），160；
}
});
});

尝试在

HTML部分：-

 <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>

---

请你看看我的问题好吗。。。

 <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>

#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;
}