如何将边框半径添加到 angular mat table？

Question

我正在尝试将 mat-table 边框设为圆形。但它不起作用。试过这个-

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

如何实现？

Answer 1

如果你想在整个应用程序中使用它，只需将它添加到你的主 css 中，使用 !important 就像下面的

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

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

虽然这不是最佳实践并且也已弃用但解决了问题

Answer 2

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

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

margin applies to all elements except elements with table display types other than table-caption, table and inline-table.

padding applies to all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

解决方案

如何为 table 行设置 border 并指定 margin 和 padding 取决于边框模型（collapse 或 separate) 你用。

分离边框模型：border-collapse: seperate

In the separated borders model, the edges coincide with the border edges of cells. (And thus, in this model, there may be gaps between the rows, columns, row groups or column groups, corresponding to the 'border-spacing' property.)

In this model, each cell has an individual border. The 'border-spacing' property specifies the distance between the borders of adjoining cells. (...) Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

解决方案：如果你想要边框、边距和填充，你可以这样做：

td.mat-细胞{ /* 行填充 / 填充：16px 0； / 行边框 */ border-bottom: 1px solid #ffa600; border-top: 1px solid #ffa600; }

td.mat-cell:first-child { /* 行边框 */ border-left: 1px solid #ffa600; }

td.mat-cell:last-child { /* 行边框 */ border-right: 1px solid #ffa600; }

table{ /* 行间距/边距 */ border-spacing: 0 8px !important; }

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

折叠边框模型：border-collapse: collapse 折叠边界模型中的行、列、行组和列组的边缘与单元格边界居中的假想网格线重合。（因此，在这个模型中，行一起正好覆盖了 table，不留空隙；列也是如此。）

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

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

table { 边界崩溃：崩溃； }

第{ /* 行边框 */ border-bottom: 1px solid #ffa600; }

td.mat-细胞{ /* 行填充 */ 填充：20px 0；边框：none； }

tr.mat-行{ /* 行边框 */ 边框：1px 实心#ffa600； }

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

Answer 3

问题是您需要覆盖垫子的背景颜色-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 4

对我有用的最简单的解决方案是隐藏某些元素的溢出，这些元素在我们设置 border-radius 时呈现出未完成的外观。所以，我们只处理那个

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

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

Answer 5

更新：

@Eliseo 如果您将边框添加到 mat-table： border: solid 1px grey;

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

如何将边框半径添加到 angular mat table？

How to add border radius to angular mat table?

angular-material

angular

mat-table