使用邊框摺疊更改單個表格單元格元素的邊框

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