Fix table thead [closed]

Question

I am testing this table, and I am trying, via JS, to fix the thead on top when you scroll the table.

I tried with this JavaScript without any results:

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

How can I do this?

Answer 1

You don't need javascript to do it.

Just with CSS is enough

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/