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