html tbody边框,tbody边框呈现问题

我正在使用angularJS来ng重复搜索结果的数量，以便在表中显示它们。每个结果由许多表格行和列组成，因此ngRepeat正在重复容器以包含完整的结果。tbody边框呈现问题

我遇到的问题是围绕每个tbody的边框造型。每个边框将在鼠标悬停时从透明转换为指定的颜色，但是由于默认的border-collapse: collapse;属性，边框的边缘会出现重叠，这使得它们显得截止，并且通常会断开。如果我使用border-collapse: separate;和display: block;，我可以使边框显示正确，但是我失去了表格通常提供的很好的水平间距。

我的目标是让每个tbody拥有自己的边框，以便在鼠标悬停时转换颜色，同时保持表格顶部显示的th标签的适当水平间距。

这里是什么，我有一个简化版：

HTML：

Heading 1Heading 2Heading 3

{{result.a}}{{result.b}}{{result.c}}

{{result.d}}

CSS：

tbody {

transition: border-color 0.6s ease;

-webkit-transition: border-color 0.6s ease; /* Safari */

border 4px solid black;

}

tbody:hover {

border-color: red;

}

在此先感谢。

+0

究竟哪个尴尬？我可以看到几个。我制作了[jsfiddle](http://jsfiddle.net/z72pL/5/)，在Chrome上看起来不错，但在其他各种浏览器上有不同的问题。 –

+0

感谢您的回复，以及jsfiddle，因为它更清楚地说明了这个问题。请注意，每个表格边界的四边不会同时淡入和淡出。有时鼠标悬停的转换正在应用，而其他时间则不会。我的目标是将鼠标上的转换均匀地应用到特定tbody的各个方面，就像它通常那样。 –