Is it possible to make a table with round corners?

Support
#1

I want to make rounded corners for my table. Just tried to modify v-table-border-radius. It did just make the border round, so it looks like that:
rundeEcken
What could I do, to make them completly round?

#2

Hi,

The following style resolves the issue:

.v-table {
  background: transparent;

  .v-table-header-wrap {
    overflow: hidden;
  }

  .v-table-body {
    $background-color: $v-table-background-color or valo-table-background-color();
    background: $background-color;
  }
}

Add it to the theme extension, e.g. in the hover-ext.scss file.

RxiTD

It is also worth adding bigger padding for the first column caption, e.g.:

.v-table-header-cell:first-child:not(.c-grouptable-group-divider-header) .v-table-caption-container {
  padding-left: round($v-unit-size / 2);
}

6welu

Gleb

1 Like