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

【问题标题】：Change border of a single table cell element with border collapse使用边框折叠更改单个表格单元格元素的边框
【发布时间】：2014-01-05 21:39:17
【问题描述】：

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

当我 :hover 在一个 td 元素上时，我希望它的（4 边）边框将其颜色更改为红色，但这并不总是可见的。

这里有一个问题的demo，应该说明很多：

http://jsfiddle.net/4444a/

我尝试混合使用位置和 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;
}

【问题讨论】：

问题是只有一些边框变成红色。原因是边框分辨率会导致边框其他单元格（悬停单元格左侧和上方的单元格）“赢得”红色边框。

标签： html css

【解决方案1】：

插图可以解决问题。将td border: 1px solid black; 更改为：

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

Updated Fiddle example

【讨论】：

不错的把戏。它欺骗了border resolution 算法，因为solid 的优先级高于inset。
Opera 似乎有一些问题，但所有其他（主要）浏览器都很好。我想我会使用这种方法。谢谢。

【解决方案2】：

很抱歉，我没有足够的声誉来发表评论，所以我将其发布为答案。

我已将标签设置为inset black，然后将我需要更改边框颜色的单元格设置为solid。但似乎我在某个地方做错了。希望能得到帮助，非常感谢。

这是我的：http://jsfiddle.net/oLryckqn/

【讨论】：