CSS 样式 vuetify v-data-table
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52473478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling vuetify v-data-table
提问by Kavau
Between each not-last-child row of a v-data-table a line is being printed by default. I would like to modify the css to change that line, e.g. remove it. Originally, in the developer console the css regarding the border-bottom looks as follows.
默认情况下，在 v-data-table 的每个非最后一个子行之间打印一行。我想修改 css 以更改该行，例如删除它。最初，在开发者控制台中，关于边框底部的 css 如下所示。
.theme--light.v-table tbody tr:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.12);
}
I have assigned the data-table an additional class "mytable":
我为数据表分配了一个额外的类“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>
And with css I am trying to modify the table
并使用 css 我试图修改表格
.mytable table tr {
background-color: lightgoldenrodyellow;
border-bottom: none;
}
Although the background-color is changed to lightgoldenrodyellow the border-bottom is still printed. In the developer console the directive to remove the border-bottom is stroken through. The background-color is not. Which selector do I have to use to change as well the border-bottom? Using the same css as used by the theme originally doesn't work either.
尽管背景颜色更改为 lightgoldenrodyellow，但仍打印边框底部。在开发人员控制台中，删除边框底部的指令被划过。背景颜色不是。我必须使用哪个选择器来更改边框底部？使用与主题最初使用的相同的 css 也不起作用。
回答by Traxo
Which selector do I have to use to change the border-bottom?
我必须使用哪个选择器来更改边框底部？
Use your custom class and the one used by vuetify
使用您的自定义类和 vuetify 使用的类
.mytable .v-table tbody tr:not(:last-child) {
border-bottom: none;
}
Additionally you can add .theme--lightif you want to style the light theme specifically.
此外，您可以添加.theme--light是否要专门设置灯光主题的样式。
More about styling vuetify components:
有关样式 vuetify 组件的更多信息：
CSS not working (taking effect) inside component
Styling Vuetify selectors
回答by Ravi Anand
I am using VueJS 2.x. the following way of selection worked for me well.
我正在使用VueJS 2.x. 以下选择方式对我很有效。
<style lang="scss" scoped>
.table-header /deep/ {
thead {
background-color: black;
}
}
</style>回答by Mickael Lherminez
You can use !important,it can solve your problem. If it does not work try restarting your server.
您可以使用 !important，它可以解决您的问题。如果它不起作用，请尝试重新启动服务器。
.mytable table tr {
background-color: lightgoldenrodyellow;
border-bottom: none !important;
}
I hope it will help you. have a good day! :-)
我希望它会帮助你。祝你有美好的一天！:-)
