Question

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

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

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

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

Answer 2

对不起，我没有足够的声誉来发表评论，所以将其发布为答案。

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

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

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

2 个答案: