Q: How to apply pointer-events to simple-table using rowspan in Vue.js? I made the table using v-simple-table in Vuetify.js framework as Nuxt.js.
When I click on "XXX Inc.", I want the table cells for HR, business, HR,sales and business to all be marked out.
But now only first row pointed like following.

My code is below.
Could anyone advise me?
    <template>
  <v-simple-table dense>
    <thead>
      <tr>
        <th>company</th>
        <th>division</th>
        <th>section</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">XX Inc.</td>
        <td>H/R</td>
        <td>H/R</td>
      </tr>
      <tr>
        <td rowspan="2">business</td>
        <td>sales</td>
      </tr>
      <tr>
        <td>marketing</td>
      </tr>
    </tbody>
  </v-simple-table>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class extends Vue {}
</script>
<style lang="scss" scoped>
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td {
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
}
</style>


A: You can group your "rows" with <tbody> and add the css:
tbody:hover tr {
    background-color: #eee;
}

See demo forked from vuetify playground.
