Collapsed table borders in firefox sometimes missing

Question

The HTML spec allows for multiple tbody elements in tables. I have a case like that where Firefox doesn't seem to want to handle collapsed borders.

http://jsfiddle.net/hunvjrp4/

The borders on the second table display properly in Chrome 37, but don't do so hot in Firefox 33 or Internet Explorer 11.

Basically, it looks like if there is any tbody that contains (only?) hidden content, then it fails to render the borders correctly for the whole table.

Is there a workaround to get the borders to draw correctly?

I've tried not collapsing the borders, which seems to work, but leaves this particular table looking different than other tables on the site.

Code sample for fiddle linked above:

With multiple `tbody` elements:
<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>
<br />
<br />

If any of the tbody elements contain a single display: none row then things go awry:

<table class="mainContent">
    <thead><tr><th>hi</th><th>there</th></tr></thead>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
    <tbody><tr class="hide"><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>   
</table>

And the styles:

table {
    border-collapse: collapse;
}
table tr td {
    border: solid 1px #ccc;
    padding: 4px;
}
.hide {
    display: none;
}

I'm curious about the off-topic close vote. This seems to be a valid question about a specific programming situation. — jinglesthula, Nov 05 '14 at 21:53
I'm having the same problem. Did you ever find a solution or work around? thx — Clayton, Dec 21 '14 at 16:16
Sorry - it's been a while since I worked on it. I don't remember if I ever found a fix for it. I think I ended up deciding to live with it for now (less than ideal). — jinglesthula, Dec 22 '14 at 18:35

score 1 · Answer 1 · answered Jan 28 '15 at 14:06

It's a very strange behaviour, possibly a Bug in my opinion.

I tried to solve it with some workaround and first succesful one was to apply .hide class to tbody tag instead than on TR, but then I thought that probably you have some reason to apply it on table row, so I turned to "descendant selector" technique.

Look at this updated example. The only difference is that display:none is applied to TD, while continuing to set .hide class to TR in html.

.hide td {
    display: none;
}

Collapsed table borders in firefox sometimes missing

1 Answers1