Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]

[via GitHub]

GitHub user dosubot[bot] added a comment to the discussion: How to remove the 
hairline gaps between thead cells in pivot table , the bg content becomes 
visible while scrolling

<!-- Answer -->
This happens because the sticky header (`thead`) stays fixed at the top, but 
the table's border is part of the scrolling body, not the sticky header. In 
Superset's pivot table, the CSS uses `border-collapse: separate` and sets 
borders on individual header cells, which can cause visible gaps and border 
misalignment when scrolling with sticky headers. There are no built-in 
workarounds for this in the codebase—it's a side effect of how CSS handles 
sticky positioning and borders in tables[^1^].

To fix this, try these changes in your pivot table's `Styles.js`:

- Change `border-collapse: separate` to `border-collapse: collapse` on 
`.pvtTable`.
- Set a uniform border on all sides of `th` in thead, for example: `border: 1px 
solid ${theme.colorSplit};`.
- Remove or adjust any custom border rules that only apply to certain sides or 
cells, so the sticky header always has a complete border.

This should keep the header borders visually aligned with the sticky header 
during scroll.

[^1^]: [Superset Styles.js - sticky header and border 
rules](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js)


<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*

---
<sup>How did I do? 
[Good](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=great_response)
 | 
[Irrelevant](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=irrelevant_answer)
 | 
[Incorrect](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=incorrect_sources)
 | 
[Verbose](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=too_verbose)
 | 
[Hallucination](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=hallucination)
 | [Report 
🐛](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=bug_report)
 | 
[Other](https://app.dosu.dev/response-feedback/f542a4de-0f1b-4235-9306-92b875fb7af1?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat
 with 
Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)&
 nbsp;[![Join 
Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share
 on 
X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/34834)

GitHub link: 
https://github.com/apache/superset/discussions/34834#discussioncomment-14201212

----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: 
notifications-unsubscr...@superset.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org