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

Question

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

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.

You might want to use !important here, to override the current styling. try this: border-radius: 10px !important; — EMILO

tao tao · Accepted Answer · 2020-11-12T12:44:42

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

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

1 Answers