Vuetify Data Table: строки видны за скругленной шапкой при вертикальном скролле в Chrome

Question

Подскажите, пожалуйста, как обрезать строки таблицы под скругленными углами хэдэра при скролле?

При скролле строки таблицы проезжают под скругленными углами шапки. Из-за того, что углы строк прямые, они торчат поверх скругления шапки. Особенно заметно при наведении на строку.

Я пыталась решить это, добавляя border-radius на обертку таблицы:

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

Но это работает только в Firefox. В 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);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main class="bg-grey-lighten-3 pa-4">
      <v-row>
        <v-col cols="12">
          <div id="tableData">
            <v-data-table :headers="headers" :items="items" :items-per-page="50" fixed-header height="400px" class="elevation-0 custom-data-table table-with-header">
              <template #headers="{ columns }">
                <tr class="v-data-table-header">
                  <th
                    v-for="header in columns"
                    :key="header.key"
                    :style="`width: ${header.width}`"
                    class="text-left"
                  >
                    <div class="py-3">{{ header.title }}</div>
                  </th>
                </tr>
              </template>

              <!-- Кастомные строки -->
              <template #item="{ item, columns }">
                <tr class="trRow">
                  <td v-for="col in columns" :key="col.key">
                    {{ item[col.key] }}
                  </td>
                </tr>
              </template>
            </v-data-table>
          </div>

        </v-col>
      </v-row>
    </v-main>
  </v-app>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

БЛОГ НА HUSL

Vuetify Data Table: строки видны за скругленной шапкой при вертикальном скролле в Chrome

Ответы (0 шт):