CODEWITHSUNDEEP
cssvue.jsnuxt.jsvuetify.js
mohammad reza esmailzadeh
mohammad reza esmailzadeh

Reputation: 81

how can change backkground-color and border-radius of v-data-table header in vuetify?

I want to style my v-data-table header like the one you see in the image below.

link to example image

So far, I've tried adding the style directly with CSS:

<v-data-table
 :headers="headers"
 :items="desserts"
 hide-default-footer
 class="custom_table_class"   
>

</v-data-table>

.custom_table_class > div > table > thead {
  background-color: #f0f2f5;
  border-radius: 10px;
}

The code above only changes the background color but, not the border radius.

Is there a way to make something like the image you see with vuetify's v-data-table.

Any help would be appreciated.

Upvotes: 1

Views: 5130

Answers (1)

tao
tao

Reputation: 90028

Apply the CSS to the <th> elements:

.custom_table_class thead th {
  background-color: #f0f2f5;
}
.custom_table_class thead th:first-child {
  border-radius: 6px 0 0 0;
}
.custom_table_class thead th:lsat-child {
  border-radius: 0 6px 0 0;
}

Or, in SCSS:

.custom_table_class thead th {
  background-color: #f0f2f5;
  &:first-child { border-radius: 6px 0 0 0 }
  &:last-child { border-radius: 0 6px 0 0 }
}

See it working here: https://codepen.io/andrei-gheorghiu/pen/YzWdxGX

Upvotes: 5

Related Questions