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!