表格行和colgroup边框问题

Question

我有一张桌子（ 在这里叫小提琴 ），上面有一些javascript，当发生鼠标悬停时，它们会将hover类应用于相应的colgroup和row。 这应该在表中显示为+ ，即列高亮显示，行高亮显示。

不幸的是，应用边框（ 第二个小提琴 ）后，一旦将鼠标悬停在几个单元格上（我在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;
}

之所以会有怪异的效果，是因为边框改变了盒子的尺寸。

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

编辑：

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