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

Question

我正在处理角度为6的物料表，该物料表需要使用垂直虚线和每个单元格一行的表，我尝试使用stackblitz，但没有运气。

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

Answer 1

我不确定确切的外观，但是请尝试这种风格。应该可以帮助您开始：

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

Answer 2

您可以在第一个.mat单元格上放置边框。

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

Answer 3

您可以在样式表的任何列上应用样式。使用/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;
}