bug: Gap between sticky header rows in table

[bquackie]

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);
    }
}

[github-actions[bot]]

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]

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

[R-Pavan-2503]

@bquackie Try Using this :

<thead class="sticky top-0 z-10">
      <tr>
        <th class="text-center" colspan="2">Group Header Row 1</th>
        <th class="border-l-1 text-center" colspan="2">Group Header Row 2</th>
      </tr>
      <tr class="sticky top-11 z-10">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>

Reproduction URL (Required) : https://play.tailwindcss.com/GLFrbm1dkS

[pdanpdan]

Yes, it looks like border-separate border-spacing-0 fixes the problem (https://play.tailwindcss.com/yvjHSsyRFx)

@saadeghi Maybe we should add a note in the docs page for table?

Or maybe we should move from applying borders on tr to applying them on td/th by default: https://play.tailwindcss.com/ZBNzxTuupy?file=css

[saadeghi]

@pdanpdan Yes this is much better. Thanks 🙏