Javascript 如何修复表格thead和可滚动的tbody（thead包含3行）

我有以下问题：我的桌子有一个大的桌子（3排）。我想修正一下你的头像和身体滚动。我使用jquery

但当我向下滚动时，边框就消失了

$（文档）.ready（函数（）{
document.querySelector（“.tableContainer”）.addEventListener（“滚动”，函数（）{
var translate=“translate（0，+this.scrollTop+“px）”；
this.querySelector（“thead”）.style.transform=translate；
});
});
.TableData{
边界塌陷：塌陷；
字体系列：“Arial窄”、“富兰克林哥特式中”、“Arial”；
字号：1.05em；
宽度：100%；
高度：60vh；
溢出x：隐藏；
.TableData td，
.表格数据{
边框：1px纯黑；
填充：2px；
}
.TableData>thead>tr>th{
边框：1px纯黑；
填充：2px；
背景：#d9edf7；
垂直对齐：中间对齐；
文本对齐：居中；
}
.TableData thead>tr{
边框：1px纯黑；
}
.TableData>tbody>tr>th{
边框：1px纯黑；
填充：2px；
}
.TableData>tbody>tr.tr1{
背景：#eee；
字号：600；
}
.TableData>tbody>tr.tr1>td{
垂直对齐：中间对齐；
文本对齐：居中；
}
.TableData>tbody>tr.tr2{
背景：#d9edf7；
字号：600；
}
.TableData>tbody>tr.tr2>td{
垂直对齐：中间对齐；
文本对齐：居中；
}

一些文本
一些文本
一些文本
一些文本
一些文本
一些文本一些文本
一些文本
一些文本
%
№ 
Вх-%
一些文本
一些文本
1.
2.
Вх-%
台大
ΔNTU T2-T1
κt，一些文本
一些文本
一些文本
%一些文本
台大
Т0
Т1
Т2
Вх-%
台大
Вх-%
台大
Т0
Т1
Т2
А420
Т420
А440
Т440
您必须固定
t车身的高度，然后设置
overflow-y
，以便允许滚动

你可以试试这样的东西（摘自这篇文章--）

谢谢）但不工作。宽度th！=宽度td，表已损坏。超过您的代码，您将看到结果。
.TableData thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData tbody {
    display: block;
    height: 10em; //CHANGE THIS ACCORDING TO NEED
    overflow-y: scroll;
}
.TableData tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData th, .TableData td {
    width: auto;
    border: 1px solid;
}