css - 是否可以在 CUBA 平台中设置圆角表格？

Question

我想为我的桌子做圆边。刚刚尝试修改v-table-border-radius。它只是使边界变圆，所以它看起来像这样：

我能做什么？

Answer 1

以下样式解决了该问题：

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

将其添加到主题扩展名中，例如在hover-ext.scss文件中。

为第一列标题添加更大的填充也是值得的，例如：

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

请注意，该v-table-border-radius变量用于为表格页眉和页脚添加边框半径。在您使用聚合与. 为了使底部边框半径没有页脚，我建议将自定义样式名称添加到添加底部边框半径的表格中，而不是全局添加它，以防您使用BOTTOM聚合，例如：aggregationStyle="BOTTOM"

<table stylename="bottom-border-radius" ...>具有以下样式实现：

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

---

更新：改进了与表格背景颜色不同的屏幕背景颜色样式。Upd2：为底部边框半径添加了自定义样式。