table header and content misalignment

[lwqhp]

Bug description

When the user scrolls the table horizontally to its rightmost extent, a visual discrepancy appears where the column headers fail to align correctly with the corresponding data cells in the table body.

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.10

Node version

16

Browser

Chrome

Additional context

superset version: 6.0.0rc2

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

This header/content misalignment is a known bug that was recently fixed in Superset. The root cause was a mismatch in width calculation between the table header and body when a vertical scrollbar is present—the header reserved space for a scrollbar it didn't have, causing columns to misalign at the rightmost scroll position. The fix (merged in PR #36190 on 2025-11-24) adjusts the header and body widths so they always match, resolving the alignment issue when scrolling horizontally to the end [details].

If you're on 6.0.0rc2 or a build from before that date, updating to the latest master/dev version will resolve this. If you can't upgrade, a temporary workaround is to manually patch the header/body width logic in useSticky.tsx as shown in the PR. Some edge cases (like duplicate metric labels or complex groupings) may still cause issues, so if you see misalignment after updating, sharing a minimal reproducible example will help maintainers investigate further.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[rusackas]

Relates to (or duplicates?) #36185

[Shubhagata3499]

Hi! I would like to work on this issue and submit a fix.

This appears to be a frontend UI alignment problem where the table header and body cells lose synchronization when scrolling horizontally. To address this, here is the approach I plan to take:

Proposed Steps to Fix the Issue

1. Reproduce the bug locally by rendering a wide table and scrolling horizontally to confirm where the header/body misalignment occurs.

2. Inspect the DOM structure of the table component in superset-frontend and identify which elements control the column widths for the header and body.

3. check for inconsistent width handling, such as:

4. Different CSS rules applied to header vs body cells

5. Flex/grid behavior

6. Mismatch in column auto-sizing or min-width logic

7. Align the width calculation logic so that both header cells and data cells share the same size constraints or scroll-container behavior.

8. Test with different languages, especially those with wider characters (as shown in the screenshot), to ensure alignment remains stable.

9. Verify responsiveness by testing on Chrome and other major browsers.

10. Run frontend tests and lint checks (npm run test, npm run lint) before submitting a PR.

If this approach looks good, could you please assign the issue to me?
Thank you!

[piyahub]

Hello, could you please assign this issue (Fixing Table Header & Content Misalignment on Horizontal Scroll) to me.

Problem:
The table currently shows a noticeable misalignment between the column headers and data cells when scrolling to the far right. This affects readability and makes it difficult for users to correctly interpret the data.

Root Cause (Likely)

The header and body are scrolling separately, causing their positions to fall out of sync.

Column widths aren’t uniformly applied, leading to small fractional pixel differences.

Virtualization or dynamic rendering may be causing delayed or uneven layout updates, especially at extreme scroll positions.

Proposed Fix

Use one scroll container for both the header and body so they move together.

Remove any independent scrolling applied to the header. Only the main table wrapper should scroll horizontally.

Apply consistent column widths to both header and body cells to prevent auto-resizing differences.

Switch to a fixed table layout so widths don’t change based on content.

Prevent dynamic content shifts inside cells that could cause width recalculation.

Enable the table's sticky header mode if using virtualization or a UI framework.

Test at full scroll width in multiple browsers and correct any columns that still resize unevenly.

Expected Result
After applying these adjustments, the header and data cells will stay aligned throughout the entire scroll range. This will improve clarity, reduce visual glitches, and provide a more stable and professional table experience for users.

If you liked my approach, please assign me this.
Thank you.

[LevisNgigi]

@lwqhp Hello, would you confirm if this issue still exists on current master. There was a pr that solved this.