fix(Table): use tr as separator

[larseberhardt]

…om thead at the correct position in safari

Resolves #4180

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is my first PR! Sorry if there is something wrong. I've noticed today that the border in the table header move to the end of the table in Safari. Tried to fix it with still using the after pseudo element but I had no luck. Now we're not using the after element at all. The calculation in th is that the content doesn't get shifted by the border. You shouldn't notice any change in Chrome but this fixes the bug in Safari

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

I see the issue on Safari, however your solution doesn't really fix the issue as it breaks the border on Chrome with sticky header. The sticky head was the reason I used ::after to set the border, it's a tricky one 😬

[larseberhardt]

Uh I didn't checked with sticky header. I don't really get behind what Safari wants that it is displaying the pseudo element correct. I can see if I can find a other solution to fix it for Safari.

[larseberhardt]

I've figured out how it works with the pseudo after in safari and chrome. Instead of after:bottom-0 using after:end-full is doing it correctly.

[benjamincanac]

It seems it does break the loading though 😬 Both bg now apply into thead::after and still need to see the gray border under the loading bar 🤔

[larseberhardt]

I’ve explored several CSS-based approaches to solve this issue, but unfortunately, Safari doesn’t respect the height of <thead> and instead uses the height of the entire <table>. This appears to be a known Safari bug.

One workaround I attempted was to read the height of <thead> and apply it manually to the top position of a pseudo-element. However, this solution is not ideal—pseudo-elements are not real DOM elements, and their styles are more difficult to manipulate dynamically.

As a more robust alternative, I added an actual <tr> element within the <thead> to serve as the visual line. This method works reliably with both position: sticky and non-sticky scenarios, and it integrates well with the loading state (which still uses a pseudo-element). Most importantly, this solution works consistently across all major browsers.

[benjamincanac]

Nice found! I've renamed the theadLine to separator for consistency 😊

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4083

commit: 3d804cf

[Barbapapazes]

This breaks the z-index for modals and slideovers.

[benjamincanac]

@Barbapapazes Would you mind opening a new issue for this? I can't seem to reproduce 🤔

[Barbapapazes]

@Barbapapazes Would you mind opening a new issue for this? I can't seem to reproduce 🤔

yes, I will try a reproduction and open an issue if I can reproduce.

[Barbapapazes]

Another project and also have the project

[larseberhardt]

Could offer a reproduction please and which browser are you using?

[Barbapapazes]

Ok, I found it. I was trying to do a reproduction using a Nuxt application and indeed, everything was working fine. My apps are build using Inertia so I looked for differences and I found that Nuxt uses an "isolate" class on the "app" and because the slideover is outside of this, everything is fine. I added this "isolate" class around my pages (not the body to avoid to encapsulate the modal / slideover) and it's working fine now.

[benjamincanac]

@Barbapapazes Sorry about that, I completely forgot to document that part as it is automatic for Nuxt, now fixed: 9cda333.