Jquery html表的对齐问题

我正在开发jQuery应用程序。使用带有固定标题和垂直滚动条的表时，我遇到了列边框对齐问题。 当行数较多且垂直滚动条可见时，列边框会稍微错位以适合滚动条。 请建议如何修理它。我正在通过许多链接，但没有运气。 请找到演示

代码：

---

如何修复和显示边框，即使在打开垂直滚动时也不会出现任何对齐问题。任何建议都会有所帮助。

由于表格的scrolbar宽度小于固定表格，因此表格对齐方式会发生更改。一种方法是在滚动中查找表格的宽度，并将该宽度设置为固定表格

if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
   var width = $('.pane-vScroll table').width();  
   $('.pane-hScroll table:first').width( width);
} 

函数setTableWidth（）{
如果（$（'.pane vScroll'）.prop（'scrollHeight'）>$（'.pane vScroll'）.height（））{
变量宽度=$（'.pane vScroll table'）.width（）；
$（'.pane hScroll table:first'）。宽度（width）；
} 
}
$（函数（）{
setTableWidth（）；
$（窗口）。调整大小（函数（）{
setTableWidth（）；
})
})

*{
框大小：边框框；
}
身体{
字体：14px/1 Arial，无衬线；
}
桌子{
边界塌陷：塌陷；
背景：白色；
表布局：固定；
宽度：100%；
}
th，td{
填充：8px 16px；
边框：1px实心#ddd；
宽度：160px；
溢出：隐藏；
空白：nowrap；
}
.窗格{
背景：#eee；
}
.窗格玻璃{
溢出：自动；
}
.窗格vScroll{
溢出y：自动；
溢出x：隐藏；
高度：150像素；
}
表{表布局：固定；宽度：100%}
运输署{
空白：-o形预包装；
单词包装：打断单词；
空白：预包装；
空白：-moz预包装；
空白：-预包装；
}

校长1
校长2
校长3
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料
Dataaaa
资料
资料

您可以强制滚动条在thead和tbody元素上始终可见

---

假设在两个部分中设置的列宽度相同，则列将完美对齐。如果标题上没有滚动条，当滚动条在主体上可见时，列会被滚动条的宽度偏移，并且向右偏移会更严重。

@XYZ-我还没有理解您的意思，请您编辑滚动条。谢谢。检查是否可以jsfiddle.net/a8a647v8@scritCan我们可以将滚动条附加到最后一列边框。@XYZmy错误。请在上面的帖子中找到我编辑过的部分。我无法在没有未对齐的情况下显示动态数据的垂直滚动固定标题。任何建议都会有帮助。谢谢。我不知道这是否是一个合适的解决方案。检查这个

  * {
        box-sizing: border-box;
    }
    body {
        font: 14px/1 Arial, sans-serif;
    }
    table {
        border-collapse: collapse;
        background: white;
        table-layout: fixed;
        width: 100%;
    }
    th, td {
        padding: 8px 16px;
        border: 1px solid #ddd;
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
    }
    .pane {
        background: #eee;
    }
    .pane-hScroll {
        overflow: auto;
    }
    .pane-vScroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 30%;
    }

    table { table-layout:fixed;width: 100% }
    td {
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;

    }

if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
   var width = $('.pane-vScroll table').width();  
   $('.pane-hScroll table:first').width( width);
} 

<thead style="overflow-y: scroll;">
<tbody style="overflow-y: scroll;">