Create vertical table border with a bit of images

I need to make a css class for a table created from CMS with tinyMCE so it will look like one below.

https://i.sstatic.net/0xcdT.png

Everything is pretty trivial except that dashed vertical delimeter with cirles. Actually having no idea how can I do it.

Here's what I have atm. Just a dashed line.

https://i.sstatic.net/Wp6M6.png

table.testclass {width: 100%; font-size: 1.3em; -webkit-border-vertical-spacing: 1px; -webkit-border-horizontal-spacing: 0px;}
 .testclass tr:first-child td:first-child{border:0px; }
 .testclass tr:first-child td:last-child{border: 0px;}
 .testclass td{ height: 50px; border-bottom: 1px; border-top: 1px; border-color: black; border-style: solid; vertical-align: middle;}
 .testclass tr td:first-child {text-align: right; border-left: 1px solid black; padding-right: 0px; border-right: 1px dashed rgba(0, 0, 0, 0.33) !important; width: 33%; padding-right: 25px; }
 .testclass tr td:last-child {text-align: left;border-right: 1px solid black; padding-left: 25px;}

Here's HTML generated:

<table class="testclass" border="0">
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
  </tr>
  <tr>
   <td>assdava</td>
   <td>zxcv234vbzx</td>
  </tr>
  <tr>
   <td>23dfasdfadq2</td>
   <td>sdfWFASDF</td>
  </tr>
 </tbody>
</table>

Solution

Here is a way entirely using CSS and pseudo elements. Can't speak to how cross-compatible it is, but you should experiment and see if it is flexible enough for you (based on the CSS you used, with assigned heights and such on the td elements, it would work in functioning browsers).

See the fiddle

Relevant code:

.testclass, .testclass td {
    position:relative; /* allows proper positioning of absolute elements */
}

.testclass tr td:first-child:before {
    content:'';
    position:absolute;
    right:1px;
    top:18px; /* positions it at the top of the circle */
    width:1px;
    height:100px;   /* whatever you want (here is td height * 2).. but has bearing on other code */
    border-right:1px dashed #555;
}

.testclass tr td:first-child:after {
    content:'';
    position:absolute;
    right:-7px; /* width of circle/2 */
    top:18px; /* height of td - height of circle/2 */
    height:14px;
    width:14px;
    border-radius:50%; /* don't forget vendor prefixes -- makes it a circle */
    background:#fff;
    z-index:2; /* puts it on top of the vertical dashed line */
    border:1px dashed #666;
}

/* this one is the final circle below the entire table */
.testclass:after {
    content:'';
    position:absolute;
    left:33%; /* width of the left-most td element */
    margin-left:-9px;/* width of circle/2 */
    bottom:-75px; /* height of td/2 - height of :after element */
    height:14px;
    width:14px;
    border-radius:50%;
    background:#fff;
    z-index:2;
    border:1px dashed #666;
}

Understandable if this isn't a method you can use. for something that would work in older browsers, you would really need to use different HTML markup. You could also, if needed, use an image for the circle (which would mean border-radius wasn't necessary). I didn't vendor prefix or anything... only tested in chrome.

I tried to add comments to the measurements to explain how they were derived. I don't think I used any magic numbers.