如何使表列分区在内容之间居中？

Question

如何使单元格边框位于两侧单元格内容之间？

我有一个用表格制作的导航栏：

但我希望分频器像这样集中：

我该怎么做（不使用javascript）？

JSFiddle

HTML：

<table>
    <tr>
        <td>
            <a href="something"><div>
                something
                </div></a>
        </td>
        <td>
            <a href="something_else"><div>
                Asdf
                </div></a>
        </td>
        <td>
            <a href="long_somthing"><div>
                Extra Long Something
                </div></a>
        </td>
        <td>
            <a href="qwerty"><div>
                qwerty
                </div></a>
        </td>
        <td>
            <a href="stuff"><div>
                Things
                </div></a>
        </td>        
    </tr>
</table>

CSS：

    table {
    width:100%;
    height:20px;
    border-spacing:0px 0px;
    background-color:#f6f6f6;
}

a {
  color:#696969;
  font-family:sans-serif;
  text-decoration:none;
  font-size:13pt;
    outline:none;
}

div:hover {
    color:#343434;
}
div:active, div:focus {
    outline:none;
    background-color:orange;
}

td {
  border-left:2px groove rgba(147,147,147,0);
  border-right:2px groove rgba(147,147,147,0);
  text-align:center;
  cursor:pointer;   
}

td:hover {
  border-left:2px groove rgba(147,147,147,.5);
  border-right:2px groove rgba(147,147,147,.5);
  color:#343434;
  background-color:rgba(255,255,255,.5);
}
td:first-child {border-left:none;}
td:last-child {border-right:none;}

div {
    width:100%;
    height:100%;
    padding:5px 0px;
}