This repository has been archived by the owner on Oct 28, 2020. It is now read-only.
When "stuck" table headers are shifted one pixel to the right #665
Comments
|
@3SCadmin could you create a codepen that reproduces your issue? It's worth mentioning that |
Ok, recreated a stripped down example which shows the above effect: |
|
Sorry pressed something that changed status to 'closed' |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
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.
becomes
The text was updated successfully, but these errors were encountered: