user3815078 user3815078 - 1 month ago 9
HTML Question

Vertical dotted line in between a column in html table

I have created an html table as shown below:

enter image description here

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

enter image description here

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

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>