如何为角垫表添加边框半径？答案

【问题标题】：How to add border radius to angular mat table?如何为角垫表添加边框半径？
【发布时间】：2021-06-10 07:27:46
【问题描述】：

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

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

如何做到这一点？

【问题讨论】：

这段代码你在哪里写的？
如果你也提供你使用的 html 会很好

标签： angular angular-material mat-table

【解决方案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

【讨论】：

感谢@Eliseo 的正确方向。不知道为什么我对这个问题投了反对票并从其他人那里得到了错误的答案！ ://
这不起作用。如果添加 border: 1px solid black; 它不会使边缘变圆。此解决方案没有可见边框。
使用border-collapse:separate; 而不是border-collapse: collapse;

【解决方案2】：

对我有用的最简单的解决方案是隐藏某些元素的溢出，当我们设置边界半径时，这些元素看起来未完成。所以，我们只是处理它

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

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

【讨论】：

它可以工作，但是如果有边框宽度，它不会显示。
有效，但是当你使用stick header时，这不起作用。因为溢出：隐藏会影响整个事情。

【解决方案3】：

更新：

如果您将边框添加到mat-table，@Eliseo 答案有效：边框：solid 1px gray;

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

【讨论】：

【解决方案4】：

如果您想在整个应用程序中使用它，只需使用 !important 将其添加到您的主 CSS 中，如下所示

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

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

虽然它不是最佳实践并且也已被弃用但解决了目的

【讨论】：

我认为在 style.css 中为 mat-table 创建一个类是更好的做法（它将可用于整个应用程序），其次，如果 CSS 选择器格式正确，则不需要 !important 或 ::deep。这些有点老套。

【解决方案5】：

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

基本上不能直接给表格行添加边距或内边距。

margin适用于除table-caption、table和inline-table以外的表格显示类型的元素之外的所有元素。

padding 适用于除 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column 之外的所有元素。

解决方案

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

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

在分离边框模型中，边缘与单元格的边框边缘重合。（因此，在此模型中，行、列、行组或列组之间可能存在间隙，对应于 'border-spacing' 属性。）

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

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

td.mat-cell { /* 行填充 / 填充：16px 0； / 行边框 */ 边框底部：1px 实心#ffa600；边框顶部：1px 实心#ffa600； }

td.mat-cell:first-child { /* 行边框 */ 左边框：1px 实心#ffa600； }

td.mat-cell:last-child { /* 行边框 */ 右边框：1px 实心#ffa600； }

表{ /* 行距/边距 */ 边框间距：0 8px !important; }

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

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

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

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

表{ 边框折叠：折叠； }

第 { /* 行边框 */ 边框底部：1px 实心#ffa600； }

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

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

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

【讨论】：