Вертикальная линия и горизонтальная двунаправленная стрелка в ячейке таблицы HTML с использованием углового или углового материала

Question

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

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

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

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

Например: 2

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

Пример изображения:

Answer 1

Для второй части вашего вопроса:

Вы можете использовать изображения для стрелок: http://geraintluff.github.io/sequence-diagram-html/example-css.html

Что-то вроде этого:

<div class="action left-1-4 right-2-4">
  <img class="arrow-right" src="images/arrow-right.png" alt="Alice --> Bob">
  talks
</div>

SVG также будет работать: https://iconmonstr.com/arrow-right-thin-svg/ или даже этот: https://www.beyondjava.net/how-to-connect-html-elements-with-an-arrow-using-svg. Внешняя библиотека для подключения стрелок: https://www.cssscript.com/connect-elements-directional-arrow/

Что-то вроде этого:

<link rel="stylesheet" href="domarrow.css">
<script src="domarrow.js"></script>
<div id="d1"></div>
<div id="d2"></div>
<connection from="#d1" to="#d2" tail></connection>

Можно даже попытаться объединить линии + треугольник css : https://www.w3schools.com/howto/howto_css_arrows.asp

Answer 2

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

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