Javascript 如何使浮动标题列水平滚动并防止它们向左对齐？

我有一个html表，当用户滚动窗口时，它总是显示其标题列。它工作正常，但标题（thead）总是左对齐；当表格窄且居中时，列与标题列不再匹配。当表格非常宽且有许多列时，也会发生这种情况，迫使出现水平滚动；标题不会滚动，并且始终显示第一列

JavaScript:

function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#main_table").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom)
{
    clone_table = $("#clone");
    if(clone_table.length == 0)
    {
        clone_table = $("#main_table").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed', 'pointer-events': 'none', top: 0});
        clone_table.width($("#main_table").width());
        $("#table_container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({visibility:'visible'});
    }
}
else
{
    $("#clone").remove();
}
}
$("#main_table").wrap('<div id="table_container"></div>');
$('<div id="bottom_anchor"></div>').insertAfter('#main_table');
$(window).scroll(moveScroll);

我怎样才能解决这个问题

预演

预览-已解决

附加模块：

.css({
    position: 'fixed',
    'pointer-events': 'none',
    left: $("#main_table").offset().left+'px',
    top: 0
})

---

（哦，我把很多jQuery链接在一起，只是因为我喜欢它的外观。）

谢谢！这就解决了居中表的问题。但不是水平卷轴的宽度。请检查一下这个好吗？我不是jQuery专家。非常感谢。它解决了水平滚动的问题，但打破了居中的表格。。我会设法找到解决办法。无论如何谢谢你！是否也可以使第一列的行为与此类似？所以第一行（列标题）和第一列应该始终可见？谢谢……这可能是可能的；我以前从来没有担心过，因为有插件可以为你做——这是最流行的。我已经做过了。我在你的建议中只找到了类似iframe的解决方案（带有额外的卷轴）。奇怪的是，这种固定列随处可见，而我需要的似乎很难找到。

body {
    width: 500px;
}
thead tr {
    background-color: lightgrey;
}

.css({
    position: 'fixed',
    'pointer-events': 'none',
    left: $("#main_table").offset().left+'px',
    top: 0
})