tbody border is rendering issue

Question

I'm using angularJS to ngRepeat over a number of search results in order to display them in a table. Each result consists of a number of table rows and columns, so the ngRepeat is repeating a tbody container to encompass a full result.

The issue I'm having is in styling a border around each tbody. Each border is to transition from transparent to a specified color on mouseover, however the edges of the borders appear overlapped due to the default border-collapse: collapse; property, which makes them appear cut-off, and generally broken. I can make the border appear correct if I use border-collapse: separate; and display: block;, but I lose the nice horizontal spacing of columns that the table would normally provide.

My goal is for each tbody to have it's own border so I can transition the color on mouseover, while maintaining proper horizontal spacing with respect to the th tags that are displayed at the top of the table.

Here is a simplified version of what I have:

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

I've consulted: tbody border not showing, Add borders on <tbody>, Border-top from tbody and border-bottom from thead don't work at the same time? amongst others..

Thanks in advance.

Which awkwardness exactly? I can see several. I made [a jsfiddle](http://jsfiddle.net/z72pL/5/) that looks good enough on Chrome, but has different issues on various other browsers. — Mr Lister, Dec 18 '13 at 11:26
Thanks for the response, and the jsfiddle as it illustrates the issue more clearly. Notice that the four sides of the border on each table entry don't fade in and out at the same time. Sometimes the transition on mouseover is being applied and other times it is not. My goal is to have the transition on mouse over be applied uniformly to at all sides of a particular tbody, as it does normally. — mpataki14, Dec 18 '13 at 13:56

score 0 · Accepted Answer · answered Dec 22 '13 at 01:57

Just for anyone who runs into a similar issue in the future, I ended up solving this problem by avoiding using a table and the tbody tag entirely. I setup the layout to visually resemble a table using a series of divs, allowing me to apply the border to a div in the usual way. The down side to this approach is that you lose the automatic column width sizing based on the contained content, but the upside is that you avoid the border issues described above.

I hope that helps.

tbody border is rendering issue

1 Answers1