テーブルがあります
<v-data-table
:headers="headers"
:items="bookings"
class="elevation-1"
:search="search"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.date }}</td>
<td>{{ props.item.time }}</td>
<td>{{ props.item.vehicle }}</td>
</template>
</v-data-table>
Vuetifyで作られ、すべて正常に動作します。交互の行を異なる色にする必要があります。または、bootstrap .table-striped
クラスをテーブルに追加します。
拡張可能なテーブルがある場合、これで問題が発生しました。これは、vuetifyのドキュメントでの例に従って、結果のテーブルが、展開されているコンテンツに対しても1行になるためです。
Anyhuこれは私が結んだスタイルです:
tr:nth-of-type(4n+3) {
background-color: rgba(0, 0, 0, .05);
}
オフセットが3の4行ごとに、ヘッダーを含めません。