[Vuejs]-Vuetify Data Table: How to get divider in vertical table, and change the first column's background color?

by

0👍

Change css for first column in table, like this:

table tr > td:first-child {
  border-left: 1px solid #dddddd;
  background: lightgray
}

0👍

Just add a class name for the header and column cells to the header object of the column, e.g.

const header = [
  {
    text: 'My Column',
    value: 'my-column',
    class: 'with-divider',
    cellClass: 'with-divider'
  },
  ...
]

and style the cell as you like with css:

.with-divider {
  border-right: 1px solid grey;
}

0👍

To get vertical borders for all columns in Vuetify 3 data table I used this:

<style scoped>
  :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  }
  :deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child), .v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) { 
    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  }
</style>

Using :deep() is very important if you want to use scoped styling.

Leave a comment