I have a vuetify table with class condition-table
, I applied this CSS
.condition-table {
background-color: #e1f5fe70;
}
It works, but when I did this
.condition-table > thead > tr {
color: black;
background-color: white;
}
It doesn't work at all. I just want to make my table header a bit stand out than then the row items .
Please let me know if you notice I missed anything
CodePudding user response:
As you are trying to override the inbuilt styles of the <v-data-table>
header. You can use deep selector.
::v-deep .v-data-table-header {
color: black;
background-color: white;
}
CodePudding user response:
v-data-table
have a header
slot. You can use it to modify header style.
<template>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
hide-default-header
>
<template v-slot:header="{ props }">
<th v-for="head in props.headers" >{{ head.text.toUpperCase() }}
</template>
</v-data-table>
</v-app>
</div>
</template>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 200,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
}
],
}
},
})
And here is text color style
.header-text-color{
color: red;
}