Intersecting horizontal and vertical lines in HTML and CSS

Question

I have begun creating an OrgChart using HTML and CSS. One issue I have run into is creating an intersecting chart flow-line between <tr> and <td> elements.

I created container, vertical-line and horizontal-line definitions that I wrapped into <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` for the horizontal-line to intersect in the middle with the vertical-line. However, the line remains at the bottom.

I have added the CSS and HTML to my post and hope that one of you can help me on what I am doing wrong.

table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

tr {
  border: none;
}

th,
td {
  border-collapse: collapse;
  border: 1px solid black;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  width: 100;
}

div.container {
  width: 40px;
}

div.vertical-line {
  border-left: 1px solid red;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

div.horizontal-line {
  border-bottom: 1px solid red;
  height: 1px;
  margin-top: auto;
  margin-bottom: auto;
  width: 40px;
}

<table>
  <tr>
    <td style="background-color: goldenrod" colspan="3">
      <div>Dept
        </br>
        <b>EmpName</b>
      </div>
    </td>
  </tr>

  <tr>
    <td style="width: 42.5%; background-color: wheat">
      <div>Dept
        </br>
        <b>EmpName</b>
      </div>
    </td>

    <td style="width: 15%">
      <div class="container">
        <div class="vertical-line">&nbsp;</div>
        <div class="horizontal-line">&nbsp;</div>
      </div>
    </td>

    <td style="width: 42.5%">
      <div style="background-color:#CCFFCC">Dept
        </br>
        <b>EmpName</b>
        <div style="border-bottom: 1px solid">
        </div>
        <div style="background-color:#CCFFFF">Dept
          </br>
          <b>EmpName</b>
        </div>
    </td>
  </tr>
</table>

@Rob My point is that `` is not correct in any spec. See https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br — j08691, Aug 03 '18 at 00:12
@j08691 I understand completely but suggesting `
` is not doing anyone any favors and your link says the same thing I did. — Rob, Aug 03 '18 at 00:13

score 0 · Accepted Answer · answered Aug 02 '18 at 23:52

Here's a workaround:
add another horizontal line before the vertical line:

<td style="width: 15%">
  <div class="container">
    <div class="horizontal-line">&nbsp;</div>
    <div class="vertical-line">&nbsp;</div>
    <div class="horizontal-line">&nbsp;</div>
  </div>
</td>

Then change the display of it's container to flex:

div.container {
    display: flex;
    width: 40px;
}

Intersecting horizontal and vertical lines in HTML and CSS

1 Answers1