6表下方的垂直线CSS

Question

我想在一张桌子下面制作6条CSS垂直线。我附上了我需要实现的截图。有人可以帮我解决这个问题。

<div id="tablebar">
<table>
    <thead>
        <tr>
            <th>1960</th>
            <th>1970</th>
            <th>1980</th>
            <th>1990</th>
            <th>2000</th>
            <th>2010</th>
        </tr>
    </thead>
</table>

css：

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

Answer 1

我玩了一下，这就是你要追求的吗？

#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%;
}

这是Fiddle