html表中列之间的垂直虚线

Question

我创建了一个html表，如下所示：

现在我想在此表的列之间绘制一条垂直虚线。见

有人可以帮我吗？

以下是第1行的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请检查html和css下面的html表格中添加垂直线

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;