Question

我有一个表（fiddle here），它有一些javascript，当鼠标悬停时，会将hover类应用于相应的colgroup和row。这应该在表格中显示为+，即列突出显示，行为。

不幸的是，应用了边框（second fiddle），一旦你将鼠标悬停在几个单元格上（我正在使用Chrome浏览器），这会变得有点棘手。有人能看出为什么会这样吗？

我试过评论border-collpase属性，但这没有用。

.hover {
    background: #f0f0f0;
    background: #f4f4f4;
}
colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

Answer 1

评论你在fiddle1

中显示的最后两个css属性

/*colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}*/

Answer 2

这是一个快速修复。尝试添加这些规则。

colgroup {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}


tr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

出现怪异效果的原因是边框改变了盒子的尺寸。

通过添加白色边框（或与底色匹配的边框），您只需更改颜色而无需更改尺寸。

编辑：

您可以根据需要更改悬停中的规则以更改边框颜色。这样可以消除一些冗余。

表行和colgroup边框问题

2 个答案: