[BUG] Border does not get respected with fixed headers

[arjendevos]

Describe the bug You can actually see it in this: https://virtuoso.dev/table-fixed-headers/

When you scroll the border get's overlapped or dissappears.

My example:

Midway scroll:

Scrolling the border to the top:

The border somehow scroll with the entire table but the fixed header stays. I've looked in the code but can't really pinpoint where this is happening.

[arjendevos]

Found the issue: position: sticky does somehow not respect the borders.

Found this codepen: https://codepen.io/Ray-H/pen/bMedLL

[arjendevos]

Currently fixed it like this:

• Added a tr with 1px height to the thead: <th className="bg-grey-100 h-px p-0" colSpan={4}></th>
• Added a div inside the th to get the right border:

<th className="m-0 w-32 p-0 text-start font-medium text-slate-600">
  <div className="flex h-12 items-center border-r px-3">ID</div>
</th>

[petyosi]

@arjendevos Thank you for sharing the workaround. If you think there's a way to fix this inside the component, please submit a PR. I'm not aware of a way to do that.

[ilko-nikolov]

My workaround: for vertical borders: setting increaseViewportBy={{ top: 50 }} for bottom border: setting box-shadow: inset 0px -1.5px 0px 0px lightgray; for the th