stickybits
stickybits copied to clipboard
dollarshaveclub
When "stuck" table headers are shifted one pixel to the right
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
@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 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