如何使用JS修复顶级表格

Question

我实际上正在处理此table，当您滚动表格时，我需要在表格顶部修复标题 thead 。在我的情况下，我需要通过JS或jQuery修复它，我无法编辑表格的HTML。

我尝试使用此脚本但没有结果：

<script>
   document.getElementById("tablepress-10").addEventListener("scroll", function() {
    var translate = "translate(0," + this.scrollTop + "px)";
    this.querySelector("thead").style.transform = translate;
});
</script>

这是HTML：

<div id="tablepress-10_wrapper">
<table>...</table>
</div>

这是CSS：

#tablepress-10_wrapper {
overflow: auto !important;
height: 400px !important;
}

我写错了什么想法？有什么提示吗？

感谢您的建议。

PS：我正在使用 Wordpress

Answer 1

我正在寻找一段时间的解决方案，发现大多数答案都不起作用或不适合我的情况，所以我用jquery写了一个简单的解决方案。

这是解决方案大纲。

1. 克隆需要固定标头的表格，并将克隆的副本放在原始
之上
2. 从顶部表格中删除表格主体
3. 从底部表格中删除表格标题

4. 调整列宽。 （我们记得原始的列宽）

   string x1 = a1.Elements("FirstName").FirstOrDefault().Attribute("ripName").Value;