Styling vuetify v-data-table

Question

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.

.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":

<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

.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.

Probably the ones you mentioned are used `.mytable .v-table tbody tr:not(:last-child)` (and .theme--light if you want it to remove specifically for the light theme I guess)? — Traxo, Sep 24 '18 at 06:25
It [works](https://codepen.io/anon/pen/GXapWq), unless I misunderstood you. — Traxo, Sep 24 '18 at 09:00
I agree. It does work in your example. For some reason it doesn't work in my app (which I cannot post/publish). Will have to continue my search. Thank you for your help! If I find the cause I'll publish it here. — Kavau, Sep 24 '18 at 12:42
I suspect it's because you are using scoped styles in your app. To deal with that, you might want to read this answer: https://stackoverflow.com/a/50985784/1981247 — Traxo, Sep 24 '18 at 12:49

Traxo · Answer 1 · 2019-01-15T20:48:45.260

5

Which selector do I have to use to change the border-bottom?

Use your custom class and the one used by vuetify

.mytable .v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

Additionally you can add .theme--light if you want to style the light theme specifically.

codepen

More about styling vuetify components:

CSS not working (taking effect) inside component
Styling Vuetify selectors

edited Jan 15 '19 at 20:48

answered Sep 25 '18 at 06:46

Traxo

18,464
4
75
87

@iamwhitebox Could you be more specific? It appears that this answer might be out of date, and that some elements might have been changed in vuetify over the years. Also it's possible that you were using scoped styles, and missing the selectors? You can find more info in the linked `CSS not working (taking effect) inside component` thread. – Traxo Sep 18 '20 at 06:46
It's crazy dumb stuff like this that forced me to revert to using regular HTML tables instead of Vuetify's "special" tables. They're so hard to style properly without resorting to deep selecting Vuetify classes or doing stuff like this answer. – Nathan Jun 18 '22 at 07:53

score 3 · Answer 2 · answered Jan 24 '19 at 11:31

3

I am using VueJS 2.x. the following way of selection worked for me well.

<style lang="scss" scoped>
.table-header /deep/ {
  thead {
    background-color: black;
  }
}
</style>

answered Jan 24 '19 at 11:31

Ravi Anand

5,106
9
47
77

score 2 · Answer 3 · answered Dec 23 '20 at 13:15

2

I am using Vuetify version 2.3.21. After trying a lot of things, I managed to remove the lines by changing td. Changing tr did not remove the lines, but you can change it to color the row, for example.

I also had to use !important. I added this to my page's CSS:

.v-data-table td {
    border-bottom: none !important;
}

This modification works with <v-simple-table> as well.

answered Dec 23 '20 at 13:15

Heitor Chang

6,038
2
45
65

This worked for me, removed border in data rows – Fabio Martins Jun 27 '23 at 23:47

score 1 · Answer 4 · answered Jun 18 '21 at 05:35

1

try this.

.v-data-table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important; }

answered Jun 18 '21 at 05:35

Adrish

112
1
3

2

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Al Foиce ѫ Jun 18 '21 at 08:42

score 0 · Answer 5 · edited Jun 06 '20 at 14:33

0

You can use !important, it can solve your problem. If it does not work try restarting your server.

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none !important;
 }

edited Jun 06 '20 at 14:33

halfer

19,824
17
99
186

answered Nov 26 '19 at 09:06

Mickael Lherminez

679
1
10
29

Styling vuetify v-data-table

5 Answers5

Linked