Skip to content

fix(VTable): clip sticky header to container border-radius (Fixes #21394) - #23096

Open
waterWang wants to merge 1 commit into
vuetifyjs:masterfrom
waterWang:fix/21394-vtable-fixed-header-border-radius
Open

fix(VTable): clip sticky header to container border-radius (Fixes #21394)#23096
waterWang wants to merge 1 commit into
vuetifyjs:masterfrom
waterWang:fix/21394-vtable-fixed-header-border-radius

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Description

When a table has border-radius (e.g. inside a card) and fixed-header is enabled, the sticky thead header renders with a solid background that covers the container's rounded top corners, breaking the visual border-radius.

Root cause

The .v-table__wrapper has overflow: auto and border-radius: inherit, but the sticky thead inside it is positioned at top: 0 with z-index: 2. The header cells have background: $table-background which paints over the wrapper's rounded corners.

Fix

Added overflow: hidden to .v-table (the flex container), which clips the sticky header to the table's border-radius. This is a standard CSS pattern for rounded corners on scrollable containers with sticky headers.

Fixes #21394

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

Successfully merging this pull request may close these issues.

[Bug Report][3.8.4] Fixed header not respecting border radius of table

1 participant