CODEWITHSUNDEEP
htmlcssfirefoxhtml-table
jinglesthula
jinglesthula

Reputation: 4587

Collapsed table borders in firefox sometimes missing

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

Upvotes: 6

Views: 1010

Answers (1)

Luca Detomi
Luca Detomi

Reputation: 5716

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

Upvotes: 1

Related Questions