Vertical dotted line in between a column in html table

Question

I have created an html table as shown below:

Now I want to draw a vertical dotted line in between a column in this table. See

Can somebody help me with this?

Here is the code for row 1 :

#myProgress {
  height: 20px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #4675A1;
  display: inline-block;
}

<tr>
   <td align="center">1</td>
   <td>2014-03-05</td> 
   <td>2014-03-05-M01117</td>
   <td><div class="col-xs-3">32</div></td>
   <td><div class="col-xs-4"><div style="width: 200px;"><div id="myProgress" style="width:10%"> </div> </div></div></td>
   <td>78.3</td>
</tr>

Answer 1

Do check below html and css to add vertical line in html table

.myProgress {
  height: 20px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #4675A1;
  display: inline-block;
}
.border {
  border-left: 1px solid black;
  position: absolute;
  margin: 0 0 0 55px;
  z-index: 1;
  height: 30px;
}
.border:before {
  content: ".";
  visibility: hidden;
}

<table border="1" cellspacing="0">
    <tr>
        <td align="center">1</td>
        <td>2014-03-05</td>
        <td>2014-03-05-M01117</td>
        <td>
            <div class="col-xs-3">32</div>
        </td>
        <td>
            <div class="border"></div>
            <div class="col-xs-4">
                <div style="width: 200px;">
                    <div class="myProgress" style="width:10%"> </div>
                </div>
            </div>
        </td>
        <td>78.3</td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td>2014-03-05</td>
        <td>2014-03-05-M01117</td>
        <td>
            <div class="col-xs-3">32</div>
        </td>
        <td>
            <div class="border"></div>
            <div class="col-xs-4">
                <div style="width: 200px;">
                    <div class="myProgress" style="width:40%"> </div>
                </div>
            </div>
        </td>
        <td>78.3</td>
    </tr>
</table>