使用边框合并，改变单个表格单元格元素的边框

Question

我想制作一个带有多个单元格的表格。这些单元格之间必须有1像素的边框，这就是为什么我使用border-collapse: collapse的原因。

当我:hover在td元素上时，我希望它的(四边)边框的颜色变为红色，但这种效果并不总是可见的。

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

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;
}

- user2511406

---

问题在于只有部分边框变成了红色。原因是边框分辨率导致其他单元格的边框（即鼠标指向单元格左侧和上方的单元格）“胜出”了红色边框。 - Jukka K. Korpela

Answer 1

可以使用Inset来实现。将 td 的 border: 1px solid black; 更改为：

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

更新的 Fiddle 实例

- Nix

---

不错的技巧。它欺骗了边框冲突解决算法，因为solid优先于inset。 - Jukka K. Korpela

Opera似乎在这方面存在一些问题，但其他（主要）浏览器都没有问题。我想我会使用这种方法。谢谢。 - user2511406

Answer 2

抱歉，我没有足够的声望来发表评论，所以我将其作为答案发布。 我已将标签设置为“插入黑色”，然后也将需要更改边框颜色的单元格设置为“实心”。 但似乎我在某处做错了。 希望得到帮助，非常感谢。 这是我的：http://jsfiddle.net/oLryckqn/

- Dracula2507