The freezing of the headers is done by setting the
position
property of the element to
absolute
. This would allow your element to float anywhere, you want it to. Absolute positioning is really very helpful in such scenarios, where you want an element to float on another element such as in the cases of scrolling while keeping the headers (or the column names) in their own position.
position - CSS | MDN[
^]
Tryit Editor v3.0[
^]
In your case, it would be,
headerCell.style.position = "absolute";
headerCell.style.top = "0px";
But sometimes this can be overkill, it means that you should always consider another way around before using this method, read here,
html - Is it considered bad practice to use absolute positioning? - Stack Overflow[
^].