修复表thead

Question

我正在测试这个table，我正在尝试通过JS在滚动表格时修复thead。

我尝试使用此JavaScript而没有任何结果：

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

我该怎么做？

Answer 1

您不需要使用javascript来执行此操作。

只需使用CSS就足够了

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
thead > tr, tbody{
    display:block;
}

DEMO：https://jsfiddle.net/4e62smwa/3/