Javascript 滚动顶部有固定标题的表格

我正在尝试制作一个表格，其中thead不滚动，而tbody滚动。 我使用百分比和固定宽度来决定每个单元格有多大，我希望我的百分比td都有相同的大小并与thead标题对齐

我也有一个例子来说明这个问题

.main包装器{
溢出y：滚动；
高度：300px；
边框：1px纯蓝色；
}
.内容包装器{
高度：500px；
}
.桌子{
宽度：100%；
表布局：固定；
}
.table.content{
边缘底部：15px；
}
.标题{
位置：固定；
}
.细胞{
边框：1px纯红；
宽度：100%；
高度：15px；
}
.中等{
宽度：100px；
}
.小{
宽度：50px；
}

A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J

我认为仅仅依靠CSS是不可能的

我很久以前就试过了，但没有找到解决办法

（我认为）实现它的唯一方法是使用javascript，而不是使用表，而是使用div

幸运的是，有一些插件可以为我们做这件事，比如如果您不在表中使用

标记，您可以使用

位置：sticky

属性保持单元格宽度，同时不将标题单元格从html流中移出（固定位置）

因此：

.main包装器{
溢出y：滚动；
高度：300px；
边框：1px纯蓝色；
}
.内容包装器{
高度：500px；
}
.桌子{
宽度：100%；
表布局：固定；
}
.table.content{
边缘底部：15px；
}
th{
位置：粘性；
顶部：0px；
}
.细胞{
边框：1px纯红；
宽度：100%；
高度：15px；
}
.中等{
宽度：100px；
}
.small{
宽度：50px；
}

A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J
A.
B
C
D
E
F
G
H
我
J

试试这个，但你试了又试