Vuetify v-data-table Fixed-Header: Beim vertikalen Scrollen in Chrome sind Zeilen hinter dem abgerundeten Header sichtba ⇐ HTML

[Anonymous]

Wie kann ich beim Scrollen Tabellenzeilen unter einer Kopfzeile mit abgerundeten Ecken ausschneiden?
Wenn die Tabelle scrollt, werden die Zeilen unter die abgerundeten Ecken der Kopfzeile verschoben. Da die Zeilen regelmäßige (nicht abgerundete) Ecken haben, ragen sie über die abgerundeten Kanten der Kopfzeile hinaus. Dies macht sich besonders beim Schweben über Zeilen bemerkbar.
Ich habe versucht, einen Rahmenradius zum Tabellen-Wrapper hinzuzufügen:

Code: Select all

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

Dies funktioniert in Firefox, aber nicht in Chrome. In Chrome befindet sich die Bildlaufleiste innerhalb des Containers, ist jedoch links von der Tabelle positioniert, sodass der Randradius auf den Container einschließlich des Bildlaufleistenbereichs angewendet wird und die Zeilen beim Scrollen nur teilweise auf der rechten Seite abgeschnitten werden.

Code: Select all

overflow: hidden

auf dem Container hilft nicht, weil ich die Bildlaufleiste behalten muss.

Code: Select all

clip-path: inset()

hat auch nicht funktioniert.
Wie kann ich die Tabelle oder Zeilen genau entlang der abgerundeten Kopfzeilengrenze richtig ausschneiden? Gibt es alternative Ansätze, um dieses Problem zu beheben?

Code: Select all

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

Code: Select all

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

Code: Select all

{{ header.title }}








{{ item[col.key] }}