CODEWITHSUNDEEP
cssvuetify.js
Kavau
Kavau

Reputation: 529

Styling vuetify v-data-table

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.

Upvotes: 12

Views: 74041

Answers (5)

Adrish
Adrish

Reputation: 132

try this.

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

Upvotes: 1

Heitor Chang
Heitor Chang

Reputation: 6057

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.

Upvotes: 2

Mickael Lherminez
Mickael Lherminez

Reputation: 695

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;
 }

Upvotes: 0

Ravi Anand
Ravi Anand

Reputation: 5544

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>

Upvotes: 3

Traxo
Traxo

Reputation: 19022

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

Upvotes: 5

Related Questions