How to make table column divisions centered between content? - html

Question

How can I make the cell borders centered between the contents of the cells on either side?
I have a navigation bar I made with a table:
But I want the dividers to be centered like this:
How can I do this (without using 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;
}