Table header scrolls when fixed-header is true

[hepplerj]

Issue Type (delete the irrelevant ones)

• Bug

Specs

What version are you using?
^2.21.10

What browser?
Safari; Firefox; Chrome

Expected Behavior

The fixed header to retain its position.

Actual Behavior

If my mouse cursor is on the table header and I scroll, it tries to scroll the header rather than the table/page. You can see the behavior in the screenshot below -- note the small scrollbar to the right and what seems to be two headers stacked on top of each other. If I turn off fixed-header, the issue is no longer present.

Additional relevant information: I'm using Nuxt (^2.13.3) with the Nuxt TailwindCSS plugin (^4.2.0). I'm using the table in remote mode; it seemed like the issue happened when I switched over to remote?

Steps to Reproduce the Problem

1. Set :fixed-header to true
2. Place the mouse cursor over the table header. Scroll and the header moves upwards; there seems to be two headers stacked on each other.

[yogithesymbian]

same here , but only broken when tried to collapse sidebar on off .

[cwilby]

@hepplerj I'm curious if you found a workaround for this - I have one to offer here: #373 (comment)

[hepplerj]

@cwilby I think I ended up doing something similar with CSS as a work-around. My first instinct was to edit the module directly, but of course anytime an update happens to the module that I pull in from npm it gets overridden. (The fix at the time was to simply remove overflow-x, but position: sticky as a custom css seems more sustainable and is widely supported now).