使用边框折叠更改单个表格单元格元素的边框

Question

我想使用多个单元格创建表格。单元格之间必须有一个1px的边框。这就是我使用border-collapse的原因：崩溃。

当我将鼠标悬停在td元素上时，我希望它的（4边）边框将其颜色更改为红色，但这种效果并不总是可见的。

这是问题的演示，它应该解释很多：

http://jsfiddle.net/4444a/

我试图混合位置和z索引，但他们没有工作搞好。

有没有任何纯粹的CSS方法有效地做到这一点？

“链接jsfiddle.net必须附有代码” - HTML：

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
    </tr> 
</table> 

CSS：

table { 
    margin: 20px; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

td { 
    width: 40px; 
    height: 40px; 
    border: 1px solid black; 
    text-align: center; 
} 

td:hover { 
    border: 1px solid red; 
} 

Answer 1

插图会做的伎俩。更改tdborder: 1px solid black;到：

td { 
    ... 
    border: 1px inset black; 
    ...  
} 

Updated Fiddle example