Search code examples
jquerysticky

Table with two sticky headers

I am trying to create a table with two sticky headers and one left sticky column, its working fine when we scroll to horizontal, while scrolling vertically and horizontally, second header (the second row is overlapping to left column) is not working properly, can anyone help me? I am attaching screen shot and this is working link.

JSFiddle Link is : https://jsfiddle.net/rqpra89s/

Screen shot
Solution

  • Take a look at this version I made for you. I am using just css for the important stuff and it works very well. I have added a class using js on container scroll too.

    I hope that helps.

    https://jsfiddle.net/bcwhqueu/3/

    .table__side {
  left: 0; top: 0;
  position: absolute;
  transition: box-shadow 0.25s ease;
  width: 8.0625rem;
  z-index: 1;
}