Change z-index in table th to 4

TLDR,

I am new to StackOverflow, so this answer might be a bit weird.

The z-index for table th is set to 50.

Yet in JS the th rows have z-index reset to cell.style.zIndex = "5"; as in line 64

This causes a clash in z-indices.

A simple fix would be to set the z-index in table th to 4. This is less than the tbody td elements and yet is more than other th td preventing an overlap.

Also I would recommend instead to seperate the tables in 2 parts and scroll lock then together by setting javascript scrollTop to reduce complexity.