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

Question

我想制作一个包含多个单元格的表格。单元格之间的边框必须恰好为 1px。这就是我使用 border-collapse: collapse 的原因。

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

下面是问题的demo，应该能说明很多:

http://jsfiddle.net/4444a/

我尝试混合使用 position 和 z-index，但效果不佳。

是否有任何纯 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

Inset 就可以了。将 td border: 1px solid black; 更改为:

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

Updated Fiddle example