Html 6表格下方的垂直线CSS

我试图在一张桌子下面画6条CSS垂直线。我附上了我需要实现的截图。谁能帮我拿这个吗

---

我玩了一点，这就是你想要的吗

#tablebar table{
    width:100%;
} 
#tablebar table thead tr th {
    position:relative;
}
#tablebar table thead tr th:after {
    content: ' ';
    border-left:1px solid #000;
    left:50%;
    height:100%;
    position:absolute;
    display:block;
    top:100%;
 }
#tablebar table thead tr th:first-child:after,#tablebar table thead tr th:last-child:after {
    height:900%;
}

---

这是类似于？的

感谢您的及时回复。几乎是我想要的。我需要第一个和最后一个带有全屏垂直线的表格单元格。嗨，Matthew，非常感谢您的及时回复。虽然我有一个小问题，第一条和最后一条垂直线应该在我的内容上。我可以看到这行，但在我的内容下面。你能帮我吗？你可以玩：after部分的z索引。将其设置为1可能就足以在以后的dom内容前面显示它了。非常感谢，它可以工作：）。你是明星伙伴，谢谢！享受编码乐趣。：）

  tr:after {
   content: '';
   width: 0;
   height: 100%;
   position: absolute;
   border: 1px solid black;
   top: 0;
   left: 100px;
  }

#tablebar table{
    width:100%;
} 
#tablebar table thead tr th {
    position:relative;
}
#tablebar table thead tr th:after {
    content: ' ';
    border-left:1px solid #000;
    left:50%;
    height:100%;
    position:absolute;
    display:block;
    top:100%;
 }
#tablebar table thead tr th:first-child:after,#tablebar table thead tr th:last-child:after {
    height:900%;
}