Vertical dotted line in between a column in html table -
i have created html table shown below:
now want draw vertical dotted line in between column in table. see
can me this?
here code 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>
do check below html , css 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>
Comments
Post a Comment