Нам нужно отобразить вертикальную пунктирную линию в середине ячейки, а высота вертикальной линии должна увеличиваться в зависимости от количества строк [см. Красную рамку 2 для вертикальной линии на прилагаемом рисунке]. Также нам нужно отобразить соединительную стрелку между двумя вертикальными линиями [см. красную рамку 1 для горизонтальной стрелки].

Мы попытались использовать угловой разделитель материала для вертикальной линии, который не работал должным образом. Мы попытались создать обычную таблицу HTML без углового материала и применили к ней CSS, tr, td, которые также не работали должным образом. Мы попробовали следующие способы:

.verticalLine  {  
    border-left: thick solid #ff0000;
}

<div class="verticalLine"></div>

Например: 2

<mat-divider [vertical]="true"></mat-divider>

Образец изображения:

enter image description here

0
Eswar thammana

1 ответ

Это сработало! Вам нужно добавить height: 100%

<mat-divider [vertical]="true" style="height:100%"></mat-divider>
58606826