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 -->
The hairline gaps between thead cells in Superset's pivot table are caused by
the use of `border-collapse: separate` on the table and individual border rules
on each header cell. This setup can result in visible gaps, especially when
scrolling, due to how browsers render adjacent borders and sticky headers. The
relevant styles are managed in the `Styles.js` file of the pivot table plugin,
not a traditional CSS file.
To fix this, update the table styling in `Styles.js` to use `border-collapse:
collapse` for seamless joins, and ensure all adjacent header cell borders have
the same color and width. For example:
```js
table.pvtTable {
border-collapse: collapse;
// ...other styles
}
table.pvtTable thead tr th {
border: 1px solid ${theme.colorSplit}; // use a single border for all sides
// ...other styles
}
```
Audit any custom border rules for the last or subtotal cells to make sure no
cell edge is missing a border and that all borders match. This should eliminate
the gaps and prevent background content from showing through while scrolling.
All changes should be made directly in `Styles.js` for the pivot table plugin.
[Reference: Styles.js in
plugin-chart-pivot-table](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/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/69cdcbb8-a293-4480-b565-64431811871b?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)&
nbsp;[](https://go.dosu.dev/discord-bot) [](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-14201158
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
