When "stuck" table headers are shifted one pixel to the right

3SCadmin commented 4 years ago

This maybe a support question rather than a bug report.

Here is my stripped down sample code <html> <head> <script src="js/stickybits.min.js"></script> <style type="text/css">

table { position: relative; border-collapse: collapse; }

th { position: sticky; top: 0; background-color: #F2BB80; }

table,td,th { border: 1px black solid; }

</style> </head> <body> <table> <tr><th>header1</th><th>header2</th><th>header3</th><th>header4</th></tr> <tr><td>content1</td><td>content2</td><td>content3</td><td>content4</td></tr> <tr><td>content1</td><td>content2</td><td>content3</td><td>content4</td></tr> <tr><td>content1</td><td>content2</td><td>content3</td><td>content4</td></tr> <tr><td>content1</td><td>content2</td><td>content3</td><td>content4</td></tr> </table>
</body> <script>stickybits('table tr:nth-child(1)');</script> </html>

Problem: This is how it looks when "stuck" in IE11

So everything works as promised, except that for some reason the header is offset by one pixel to the right.

I was able to mitigate the effect using stickyChangeClass:

basically adding these lines of code:

.t1 {margin-left: -1px;} <script>stickybits('table tr:nth-child(1)',{stickyChangeClass: 't1'});</script>

Now the header row is correctly aligned

When fixed
When Sticky

Only tiny remaining issue: When transitioning from fixed to sticky the header row is offset to the right for a few frames. So it skips one pixel to the right, then back into alignment as you scroll down the table.

Question: Is there a better way to use your plugin, or is this a small bug?

EDIT

Ah, the problem in my scenario is much worse: Apparently 'stickybits' somehow separates the header-row from the table.

any th cells that were wider to match their td(s) shrink
any td cells that were wider to match their th shrink

becomes

mbark commented 4 years ago

@3SCadmin could you create a codepen that reproduces your issue?

It's worth mentioning that sticky in tables is a bit quirky, see this stackoverflow thread for more info.

3SCadmin commented 4 years ago

@3SCadmin could you create a codepen that reproduces your issue?

Ok, recreated a stripped down example which shows the above effect: link for chrome: https://codepen.io/All41/pen/xxGyEbW link for IE11: https://cdpn.io/All41/debug/xxGyEbW/NQkzYBPROqRA

3SCadmin commented 4 years ago

Sorry pressed something that changed status to 'closed'

dollarshaveclub / stickybits

When "stuck" table headers are shifted one pixel to the right #665