默认情况下,在v数据表的每个非最后一个子行之间打印一行。我想修改css以更改该行,例如去掉它。最初,在开发人员控制台中,关于边框底部的css如下所示。
.theme--light.v-table tbody tr:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.12);
}
我为数据表分配了一个额外的类“mytable”:
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1 mytable">
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
并与CSS我试图修改表
.mytable table tr {
background-color: lightgoldenrodyellow;
border-bottom: none;
}
尽管将背景色更改为浅金黄色,但仍然打印了边框底部。在开发人员控制台中,敲击了删除边框底部的指令。不是背景色。我还必须使用哪个选择器来更改边框底部?使用与主题最初使用的CSS相同的方法也不起作用。
最佳答案
使用您的自定义类和vuetify使用的类
.mytable .v-table tbody tr:not(:last-child) {
border-bottom: none;
}
另外,如果您想专门为灯光主题设置样式,则可以添加
.theme--light
。codepen
有关样式化vuetify组件的更多信息:
CSS not working (taking effect) inside component
Styling Vuetify selectors
关于css - 样式化vuetify v-data-table,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52473478/