角材料 - 垫表答案

【问题标题】：Angular Material - Mat Table角材料 - 垫表
【发布时间】：2020-05-24 13:21:45
【问题描述】：

我正在使用有角度的材料，我一直在尝试为 mat-table 设置一些样式，但没有成功。我需要更改表格本身的边框半径，还需要将表格内的间距更改为“空格之间”。我非常需要这个设计：Design

谢谢！

【问题讨论】：

转到 chrome 中的页面，按 f12，然后检查元素。将鼠标悬停在边框上并单击。在样式下查看右侧。您会看到所有样式，在那里尝试更改半径，然后在组件的 Css 文件中用您的样式覆盖该样式
@ובל צרפת - 尝试将表格背景颜色更改为透明 - .mat-table { background-color:transparent; }

【解决方案1】：

您已添加以下 CSS 更改：-

.mat-table {
  overflow: auto;
  max-height: 500px;
  border-radius: 10px;  // this change
}

.example-container{
  border-radius: 10px; // this change
}

【讨论】：

【解决方案2】：

首先，您需要检查您是否为 mat-table 应用了边框样式。据我所知，mat-table 默认情况下不添加边框。如果没有，请添加边框样式，并且为了使 CSS 适用，您需要在 css 文件中的类名之前使用 /deep/。

/deep/ .mat-table {
            border: 1px solid;
            border-radius: 30%; 
        }

或者你可以添加

  encapsulation: ViewEncapsulation.None,

在您的 component.ts 作为 @component 装饰器中的参数。

【讨论】：