表行和colgroup边界问题

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

评论最后两个CSS，你在fiddle1

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