ARTICLE AD BOX
How can I clip table rows under a header with rounded corners when scrolling?
When the table scrolls, the rows slide under the rounded corners of the header. Since the rows have regular (non-rounded) corners, they stick out over the header’s rounded edges. This is especially noticeable on row hover.
I tried adding a border-radius to the table wrapper:
&.table-with-header { :deep(.v-table__wrapper) { border-radius: 12px 12px 0 0; } }This works in Firefox, but not in Chrome. In Chrome, the scrollbar is inside the container but positioned to the left of the table, so the border-radius is applied to the container including the scrollbar area, and the rows are only partially clipped on the right side when scrolling.
overflow: hidden on the container doesn’t help because I need to keep the scrollbar.
clip-path: inset() didn’t work either.
How can I properly clip the table or rows exactly along the rounded header boundary? Are there any alternative approaches to fix this?
