Question

我正在尝试使mat-table边框为圆形。但这是行不通的。尝试过此-

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1em;
}

如何实现？

Answer 1

问题是您需要超越mat-table的背景色：

.mat-table
{
  background-color:transparent!important;  
}
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 5em;
}
table tr:last-child td /*To remove the last border*/
{
  border-bottom:0 solid
}

stackblitz

Answer 2

对我有用的最简单的解决方案是隐藏某些元素的溢出，当我们设置边界半径时，这些溢出会给未完成的外观。所以，我们就解决了

.mat-table{    
    border-radius: 8px;
    overflow:hidden !important;
}

请随时指出可能导致其他问题的情况。

Answer 3

更新：

@Eliseo 的答案在您向 mat-table 添加边框时有效：边框：实心 1px 灰色；

    .mat-table
    {
      background-color:transparent!important;  
      border: solid 1px grey;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 5em;
    }
    table tr:last-child td /*To remove the last border*/
    {
      border-bottom:0 solid
    }

Answer 4

如果要在整个应用程序中使用它，只需使用！important 将其添加到您的主css中，例如

.mat-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 1em !important;
}

或者如果这不起作用，还有另一种方法使用/deep/或:: deep

尽管这不是最佳做法，也已弃用，但可以解决问题

Answer 5

您的样式问题与Angular Material表无关，但通常与HTML表有关。如果您搜索如何设置表格样式，例如在行或边距上添加边框，您会发现各种答案和建议。

您基本上不能直接向表行添加边距或填充。

margin适用于除表标题，表和内联表以外的其他表显示类型的元素。

padding适用于除表行组，表头组，表脚组，表行，表列组和表列之外的所有元素。

解决方案

如何为表行设置border并指定margin和padding取决于您使用的边框模型（collapse或separate）。

分隔的边框模型：边框折叠：单独

在分隔的边框模型中，边线与单元格的边线边缘重合。（因此，在此模型中，行，列，行组或列组之间可能存在间隙，对应于“边界间距”属性。）

在此模型中，每个单元格都有一个单独的边框。 'border-spacing'属性指定相邻像元边界之间的距离。（...）行，列，行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

解决方案：如果您想要边框，边距和填充，则可以执行以下操作：

td.mat-cell { / *行填充 / 填充：16px 0; / 行边框* / 边框底部：1像素实线＃ffa600; border-top：1px实线＃ffa600; }

td.mat-cell：第一个孩子{ / *行边框* / 左边框：1px实线＃ffa600； }

td.mat-cell：最后一个孩子{ / *行边框* / 右边框：1像素实线＃ffa600; }

表{ / *行距/边距* / border-spacing：0 8px！important; }

https://stackblitz.com/edit/angular-cjxcgt-wtkfg4

崩溃的边界模型：border-collapse：崩溃折叠边界模型中行，列，行组和列组的边缘与单元格边界居中的假设网格线重合。（因此，在此模型中，行一起精确地覆盖了表格，不留任何间隙；列同样如此。）

在折叠边框模型中，可以指定包围单元格，行，行组，列和列组的全部或部分的边框。（...）此外，在此模型中，表没有填充（但是有边距）。

解决方案：如果只需要行边框和填充，但行之间没有间距/边距，则可以这样做：

表{ 边界崩溃：崩溃； }

th { / *行边框* / 边框底部：1像素实线＃ffa600; }

td.mat-cell { / *行填充* / 填充：20px 0; 边框：无； }

tr.mat-row { / *行边框* / 边框：1px实线＃ffa600; }

https://stackblitz.com/edit/angular-cjxcgt-xphbue

Answer 6

Mi solución fue poner la tabla dentro de una tarjeta：

<mat-card style="padding: 0">
  <table mat-table>
    ...
  </table>
</mat-card>

如何在角垫表格中添加边框半径？

6 个答案: