css - 样式化 vuetify v-data-table
问题描述
默认情况下,在 v-data-table 的每个非最后一个子行之间打印一行。我想修改 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;
}
尽管背景颜色更改为 lightgoldenrodyellow,但仍会打印边框底部。在开发人员控制台中,删除边框底部的指令被划过。背景颜色不是。我必须使用哪个选择器来更改边框底部?使用与主题最初使用的相同的 css 也不起作用。
解决方案
我必须使用哪个选择器来更改边框底部?
使用您的自定义类和 vuetify 使用的类
.mytable .v-table tbody tr:not(:last-child) {
border-bottom: none;
}
.theme--light
此外,如果您想专门设置浅色主题的样式,您可以添加。
有关样式化 Vuetify 组件的更多信息:
推荐阅读
- xamarin.forms - 无法 AOT Akavache.Sqlite3.dll
- bigcommerce - 如何为现有的大型商业产品添加变体
- angular - Angular CLI 自定义构建器
- powerapps - PowerApps SubmitForm 到另一个数据源
- python - 从列表中删除非增加的连续元素,直到列表中的每个连续元素都增加
- c# - 如何用mysql服务器连接多个分支
- angularjs - Angular1.5 - 截断输出数据字符串
- stanford-nlp - 斯坦福 OpenIE 是否可用于中文文本?
- scala - 哈密顿路径泛函方式
- javascript - 尝试将 PHP 会话变量传递给节点 JS 文件