Угловой - Как добиться пунктирной границы для таблицы материалов

Question

Я работаю над таблицами материалов в угловых 6, для которых требуется таблица с пунктирной вертикальной границей и одной линией на ячейку, я пробовал с stackblitz , но не повезло.

Пожалуйста, помогите мне достичь этого. Спасибо.

Answer 1

Вы можете поместить границу в первую ячейку .mat.

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

Answer 2

Вы можете применить стиль к любому столбцу таблицы. Используйте /deep/ .mat-column-<column-def-name> в качестве селектора.

ссылка Stackblitz

Добавьте следующие стили в ваш файл 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;
}

Answer 3

Я не уверен, точный вид, но попробуйте этот стиль.следует начать:

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