tbody边框呈现问题

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

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

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

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

HTML：

<table> 
<thead> 
    <th>Heading 1</th> 
    <th>Heading 2</th> 
    <th>Heading 3</th> 
</thead> 
<tbody ng-repeat="result in results"> 
    <tr> 
     <td>{{result.a}}</td> 
     <td>{{result.b}}</td> 
     <td>{{result.c}}</td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
     <div>{{result.d}}</div> 
     </td> 
    </tr> 
</tbody>

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; 
}

我请教： tbody border not showing， Add borders on <tbody> ， Border-top from tbody and border-bottom from thead don't work at the same time? 等等。

在此先感谢。

来源

2013-12-18 mpataki14

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

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