Фиксированный заголовок Vuetify v-data-table: строки видны за закругленным заголовком при вертикальной прокрутке в Chrom ⇐ Html

[Anonymous]

Как обрезать строки таблицы под заголовком со скругленными углами при прокрутке?
При прокрутке таблицы строки сдвигаются под закругленные углы заголовка. Поскольку у строк правильные (не закругленные) углы, они выступают за закругленные края заголовка. Это особенно заметно при наведении курсора на строку.
Я попробовал добавить border-radius в оболочку таблицы:

Код: Выделить всё

&.table-with-header {
:deep(.v-table__wrapper) {
border-radius: 12px 12px 0 0;
}
}

Это работает в Firefox, но не в Chrome. В Chrome полоса прокрутки находится внутри контейнера, но расположена слева от таблицы, поэтому border-radius применяется к контейнеру, включая область полосы прокрутки, а строки при прокрутке обрезаются лишь частично с правой стороны.

Код: Выделить всё

overflow: hidden

в контейнере не помогает, потому что мне нужно сохранить полосу прокрутки.

Код: Выделить всё

clip-path: inset()

тоже не сработал.
Как правильно обрезать таблицу или строки точно по закругленной границе заголовка? Есть ли альтернативные способы это исправить?

Код: Выделить всё

const {
createApp
} = Vue;
const {
createVuetify
} = Vuetify;

const vuetify = createVuetify();

const app = createApp({
data() {
return {
headers: [{
title: "ID",
key: "id",
width: "80px"
},
{
title: "Name",
key: "name"
},
{
title: "Role",
key: "role"
},
{
title: "Status",
key: "status"
},
],
items: Array.from({
length: 20
}, (_, i) => ({
id: i + 1,
name: `User ${i + 1}`,
role: "Administrator",
status: i % 2 === 0 ? "Active" : "Offline",
})),
};
}
});

app.use(vuetify).mount('#app');

Код: Выделить всё

.custom-data-table {
--table-border: #e0e0e0;
--header-bg: #ffffff;
--row-hover: #f5f5f5;
}

/* Стили заголовков */
.custom-data-table .v-data-table-header th {
border-top: 1px solid var(--table-border);
background: var(--header-bg) !important;
font-weight: 600 !important;
box-shadow: none !important;
}

/* Скругление самих ячеек заголовка */
.custom-data-table .v-data-table-header th:first-child {
border-left: 1px solid var(--table-border);
border-top-left-radius: 12px;
}

.custom-data-table .v-data-table-header th:last-child {
border-right: 1px solid var(--table-border);
border-top-right-radius: 12px;
}

/* Границы тела таблицы */
.custom-data-table tbody td:first-child {
border-left: 1px solid var(--table-border);
}

/* Стили строк */
.trRow {
transition: background 0.2s;
}

.trRow:hover td {
background: var(--row-hover);
}

Код: Выделить всё

{{ header.title }}








{{ item[col.key] }}

Подробнее здесь: https://stackoverflow.com/questions/798 ... when-scrol