fix(Table): update styles for thead and th elements to show border fr…

[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.