You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "SrijaniDasgupta (via GitHub)" <gi...@apache.org> on 2025/08/24 09:14:04 UTC
[D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
GitHub user SrijaniDasgupta created a discussion: How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling
<img width="1043" height="203" alt="image" src="https://github.com/user-attachments/assets/30cf88bf-6166-4685-bc1a-9f04459646df" />
GitHub link: https://github.com/apache/superset/discussions/34834
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on 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?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=69cdcbb8-a293-4480-b565-64431811871b) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/34834#discussioncomment-14201158
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
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> [](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-14201212
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on 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?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=f542a4de-0f1b-4235-9306-92b875fb7af1) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
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-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
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 notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] How to remove the hairline gaps between thead cells in pivot table , the bg content becomes visible while scrolling [superset]
Posted by "SrijaniDasgupta (via GitHub)" <gi...@apache.org>.
GitHub user SrijaniDasgupta 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
<img width="952" height="223" alt="image" src="https://github.com/user-attachments/assets/b025a17b-f067-41bd-a3a2-f0c530af08e8" />
the border itself is scrolling up...while the thead cells stay stick on top
GitHub link: https://github.com/apache/superset/discussions/34834#discussioncomment-14201204
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org