Table Header Borders & Sticky Behavior Not Working Properly on Refresh/Resize in Chrome (Windows)
Hi everyone,
I'm running into an issue where the borders and sticky behavior of table headers are not working as expected in Chrome on Windows, especially when the page is refreshed or the window is resized (like during responsiveness testing in DevTools).
I've attached a video and screenshot showing the issue.
Video - https://www.loom.com/share/d5f0926c4e1f4e9b95a1e117981b079b?sid=62187e15-f803-4b70-beb0-a46b6ebf0a8e
Codepen Link - https://codepen.io/Amit-Soni-the-vuer/pen/RNwWjra
What I’ve Tried:
Converted the table into a <div>-based layout – but this caused two new issues:
The headers didn’t align correctly with the content.
The sticky behavior was lost, so headers no longer stayed fixed during scroll.
Used ::before and ::after pseudo-elements on the table and headers – no effect.
Increased z-index of the headers – still didn’t fix the border rendering.
Despite these attempts, the problem persists only in Chrome on Windows.
Expected Behavior:
The header borders should always render correctly.
The sticky positioning of headers should remain functional, even after switching layouts or resizing the browser.
If anyone has suggestions, best practices, or workarounds (especially browser-specific fixes), I’d greatly appreciate the help!
Thanks in advance!
9 Replies
Borders on sticky th can be glitchy. Did you try a psuedo-element with a width and background color? I plugged it into your codepen and it seemed to work better.
th::before {
content: "";
width: 1px;
height: 100%;
background-color: rebeccapurple;
position: absolute;
top: 0;
right: 0;
}
Thanks for looking into my issue and for your guidance. However, based on my testing, th::before selector still isn't working as expected.
Your right that didn't fix it. Perhaps try to rebuild a simpler table and only focus on the th being sticky to experiment with. Use as little CSS as possible. If it is still an issue you can open a ticket with chromium and you will have a simplified version for their developers. It can take a bit to get fixed.
If the border is super important you could try building the table with grid and non-table elements. Just add the role="table" if you do it that way.
honestly, seeing how massive it is, using grid might be the easiest
I prefer to just use grids for tables. Much easier to control stuff. Other than the semantic markup I don't really see the benefits
You can then also use a bunch of cool features like subgrid to style each row as its own div while keeping all the columns sized intrinsically
you can use grid to make the semantically correct table work better
True you could reuse the tags lol. If that's important, probably good choice
being semantically correct is important
always
@ἔρως / @StefanH / @JustALittleHeat , thanks for the guidance! I'll try using the grid system.