HTML table with fixed headers only in Y (Scrollable in X)

Question

I'm trying to do a table with a fixed header ONLY on the Y axis (Just like in Excel). The problem is that it needs to be scrollable on the X axis. I found another answer here but it doesn't work for me. Here are my tests JSBIN

I tried with

style="width: 400px; height: 200px; overflow: scroll;"

to make a test case. And with

position: absolute;

and

position: static;

To make the header static. Also tried with the answer of the other question with no positive results for me.

This is not a duplicate of the other question because the problems are slightly different.

I can use CSS, Javascript or whatever to solve this.

Answer 1

Set the theads position to absolute, and fix the tr inside it: https://jsfiddle.net/yak613/x5stpv9y/

table {
  position: relative;
  padding-top: 20px;
}
table thead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
}
table thead tr {
  position: fixed;
  background: #fff;

}