Drawing a line between 2 elements in a table.

For this example I'll use a red line connect Jael and Goni from the book Steller Heir by Scott Killian

Style (scrollable window)

<style>

  /* This styles any images inside table cells
  /* border-box makes sure that the image's border
     is drawn on the inside edge of its bounding box
  /* We position the img relative because
     z-index only works on positioned elements
     and we may want to control what appears on top

  td img {
    width: 100%;
    border: solid white 4px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative; 
    z-index: 0;
  }

  table {
    border: none;
  }

</style>

HTML (scrollable window)

<!-- "parent container needs to be positioned"
<div style="position: relative">

  <!-- The line gets drawn inside this container
  <svg id="connecting-line"></svg>

  <!-- 2 column table -->
  <table class="invisible-table">
    <tr>

      <!-- First Element -->
      <td><img id="jael" src="jael.png"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>

      <!-- Second Element -->
      <td><img id="goni" src="goni.png"></td>
    </tr>
  </table>
</div>

Javascript (scrollable window)

<script src="/js/drawLineBetween.js"></script>
<script>
    drawLineBetween(
        'connecting-line', // The ID of the svg container
        'jael', // ID tag of first element
        'goni', // ID tag of second element
        'red', // Color of the line
        10 // Thickness of the line
    );
</script>
Look what happens when you don't style {box-sizing: border-box;} for the images:

The images become off center, they're slightly to the right. Default border settings cause this. By default, borders are drawn on the outside of images, making the total size of img + border bigger than the cell.

Also, set table, td, th {border-collapse: collapse;}

The default table has spacing around the cells, and I guess that shifts the images in a way where the lines don't align the images anymore. I don't really know why, but having border-collapse set to collapse fixed my issue.

<-- =============== EXAMPLE OF NOT USEING BOX-SIZING: BORDER-BOX ================== -->

To prevent this, {box-sizing: border-box;} draws the border on the inside of the image's bounding box, keeping the image size the same.