Vuetify v-data-tableでストライプテーブルを作成するにはどうすればよいですか？

Question

テーブルがあります

<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クラスをテーブルに追加します。

Answer 1

拡張可能なテーブルがある場合、これで問題が発生しました。これは、vuetifyのドキュメントでの例に従って、結果のテーブルが、展開されているコンテンツに対しても1行になるためです。

Anyhuこれは私が結んだスタイルです：

tr:nth-of-type(4n+3) {
 background-color: rgba(0, 0, 0, .05);
}

オフセットが3の4行ごとに、ヘッダーを含めません。