Vertical dotted line in between a column in html table -


i have created html table shown below:

enter image description here

now want draw vertical dotted line in between column in table. see

enter image description here

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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -