Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Gap between sticky header rows in table #3723

Open
bquackie opened this issue Mar 25, 2025 · 2 comments
Open

bug: Gap between sticky header rows in table #3723

bquackie opened this issue Mar 25, 2025 · 2 comments

Comments

@bquackie
Copy link

Reproduction URL (Required)

https://play.tailwindcss.com/2McFD9J1oy

What version of daisyUI are you using?

v5.0.9

Which browsers are you seeing the problem on?

All browsers

Describe your issue

There is a one pixel gap between header rows when each header is sticky. As a result, the scrolling table data can be seen through the gap of the header rows.

The offending rule (assuming this isn't a desired effect) seems to be:

@layer utilities {
    .table :where(thead tr, tbody tr:not(:last-child)) {
        border-bottom: var(--border)solid color-mix(in oklch,var(--color-base-content)5%, #0000);
    }
}
Copy link

Thank you @bquackie for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@bquackie
Copy link
Author

bquackie commented Mar 25, 2025

Even if the bottom border wasn't transparent, the gap would appear as the user scrolls.

@bquackie bquackie changed the title bug: Gap between sticky rows in table bug: Gap between sticky header rows in table Mar 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant