Vertical line and horizontal bi-directional arrow within HTML table cell using Angular or Angular Material

Question

We need to display a vertical dotted line in the middle of the cell and the height of the vertical line should grow based on the number of rows [Refer red box 2 for vertical line in the attached pic] Also we need to display a connecting arrow between the two vertical lines [Refer red box 1 for horizontal arrow].

We tried using angular material divider for vertical line which did not work as expected. We tried to create a normal HTML table without angular material and applied CSS to the table, tr, td which also did not work as expected We tried the following ways:

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

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

Eg: 2

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

Sample picture:

Answer 1

It worked! You need to add height:100% on that

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

Answer 2

You can isntall this npm package: https://www.npmjs.com/package/cool-line-arrow and specify fromSelector: DOM element from which your arrow will start and toSelector:DOM element to which your arrow will go to.

Answer 3

For the second part of your question:

You can use images for arrows: http://geraintluff.github.io/sequence-diagram-html/example-css.html

Smth like this:

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

SVG would also work: https://iconmonstr.com/arrow-right-thin-svg/ or even this one: https://www.beyondjava.net/how-to-connect-html-elements-with-an-arrow-using-svg . An external library for connecting arrows: https://www.cssscript.com/connect-elements-directional-arrow/

Smth like this:

<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>

You can even try to combine lines + css triangle : https://www.w3schools.com/howto/howto_css_arrows.asp