Current solution (stackoverflow link):

<template>
 <v-data-table 
  
 ></v-data-table>
</template>

<style scoped>
.row-pointer >>> tbody tr :hover {
 cursor: pointer;
}
</style>

With this CSS cursor becomes pointer even inside expanded item area, and that's not what I want. Can someone give me a more precise CSS?

CodePudding user response：

you can use ::v-deep in your style

::v-deep tr:hover{ cursor: pointer; }

I hope this work for you

CodePudding user response：

Check this codesanbox I made: https://codesandbox.io/s/stack-72501803-css-not-cursor-pointer-ei812i?file=/src/components/Example.vue

Use the :not() CSS pseudo-class to disable the style on the expanded content area.

<style scoped>
.row-pointer >>> tbody tr:not(.v-data-table__expanded__content) :hover {
 cursor: pointer;
}
</style>