2

I want to make rounded edges for my table. Just tried to modify v-table-border-radius. It did just make the border round, so it looks like that:

enter image description here

What could I do?

melli
  • 59
  • 5

1 Answers1

8

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.

enter image description here

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

enter image description here

Pay attention that the v-table-border-radius variable is used to add border radius to table header and footer. Footer is hidden until you use aggregation with aggregationStyle="BOTTOM". In order to have bottom border radius without footer, I'd recommend adding a custom style name to a table that adds bottom border radius instead of adding it globally in case you'll use BOTTOM aggregation, e.g.:

<table stylename="bottom-border-radius" ...> with the following style implementation:

.bottom-border-radius .v-table-body {
  @if $v-table-border-radius > 0 {
    border-radius: 0 0 $v-table-border-radius $v-table-border-radius;
  }
}

Upd: improved styles for screen background color that differs from table background color. Upd2: Added custom styles for bottom border radius.

glebfox
  • 261
  • 1
  • 4
  • Hey glebfox, thanks for your solution! I tried it, but I still have the problem. My background is grey, so I always see the white edges of my white table, but I need them to be rounded like the border. – melli Jun 16 '21 at 07:02
  • Sorry, I didn't notice the gray background. Updated answer. – glebfox Jun 16 '21 at 07:41
  • I just realized that my table has round edges on top, but not at the bottom. Do you have an idea how I can solve this problem? – melli Jun 18 '21 at 09:44
  • The `v-table-border-radius` variable is used to add border radius to table **header** and **footer**. **Footer** is hidden until you use *aggregation* with `aggregationStyle="BOTTOM"`. I've updated my answer to cover this case. – glebfox Jun 21 '21 at 08:03