Angular - 如何实现材质表的虚线边框

【问题标题】：Angular - How to achieve dashed border for material tableAngular - 如何实现材质表的虚线边框
【发布时间】：2019-03-05 17:56:41
【问题描述】：

我正在处理 Angular 6 的材料表，它需要一个垂直边框虚线且每个单元格一行的表格，我尝试使用 stackblitz，但没有运气。

请帮助我实现这一目标。谢谢

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以在垫表的任何列上应用样式。使用/deep/ .mat-column-<column-def-name> 作为选择器。

Stackblitz link

将以下样式添加到您的 CSS 文件中。

/deep/ .mat-column-position {
    position: relative;
}

/deep/ .mat-column-position::after {
    content: " ";
    border - right: 1px solid #d0d0d0;
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
}

【讨论】：

谢谢你 :-) @Pankaj Prakash ，按要求去做。

【解决方案2】：

我不确定确切的外观，但试试这种风格。应该让你开始：

table /deep/ td:first-child {
  border-right: 1px solid black;
}

【讨论】：

嗨@bgraham，我之前也试过，它会以虚线边框出现，但我需要每个单元格有一行而不是虚线系列。
将其更改为 1px 纯黑色应该是票

【解决方案3】：

您可以在第一个 .mat-cell 上放置边框。

.mat-cell:first-of-type {
  border-right: 1px solid rgba(0,0,0,.12);
}

【讨论】：