border-color change in table cells - html

Question

I have a very simple HTML table like below:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><!-- Table Row -->
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
that I want when I hover on each of the cells, the borders of the cell could change color. So I wrote the following CSS trying to achieve the effect:
table{
position: absolute;
font-family:Arial, Helvetica, sans-serif;
color:white;
font-size:12px;
border:white 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
width: 100%;
height: 100%%;
}
table tr {
text-align: center;
padding-left:20px;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 33%;
height: 50%;
background-color: black;
}
table td:hover{
border:blue 1px solid;
}
This code works, but not perfectly. It works great when I hover on the cells 1, 2, 3 (as numbered in the html), BUT when I hover, for example, on cell 4 5 6, the top border of the cell is not showing blue. I think the top borders of them are overlayed by the bottom borders of the cells above.
Is there a work around to this issue?

Answer 1

With border-collapse set to collapse, the solution would be to use an inset border for all the cells, and a solid border for the cell that the mouse hovers over. Here's the suggested CSS in action: http://jsfiddle.net/QmHGG/
The following is the CSS that was applied to the table:
table, tr, td {
border: 1px inset black;
border-collapse: collapse;
border-spacing: 0;
}
td:hover {
border: 1px solid red;
}