Search code examples
javascriptcsstablesorter

Tablesorter StickyHeaders shifts columns over on scroll

In two separate parts of our software, (entirely different code) Sticky Headers have always done this and we've lived with it. I apply the StickyHeader widget and put these in a .wrapper container, and it works as intended: the header will follow on scroll. However, it always causes our headings to shift to the right. My .wrapper is simple:

.wrapper {
  position: relative; overflow-y: auto; height: 652px;
}
th {
  background-color: #003366;
  color: #ffffff; font-weight: bold;
  padding: 3px; text-align: center;
}

Please excuse the obfuscation, but I am not (legally) allowed to make a jsFiddle or provide any more clarity than this. Notice the second "black blob" is shifted completely off while the rec is clearly off-center.

Before Scroll

Before Scroll

After Scroll

After Scroll

Solution

  • Here, the issue was the CSS:

    * {box-sizing: border-box;}

    However, when applied to the demo, I could not reproduce the error. I've tried to determine what else in conjunction would be causing the issue, but whatever I tried, it would always resolve back solely to border-box. I answer my own question with the advice: if you happen upon this rare bug affecting your sticky tables, run something like

    /* give to all elements, excluding report_table */
*:not(.report_table *) { 
    box-sizing: border-box;
}