Geek Answers Handbook

Collapsed table borders in firefox are sometimes missing

The HTML specification allows multiple tbody elements in tables. I have a case where Firefox does not seem to want to handle minimized borders.

http://jsfiddle.net/hunvjrp4/

The borders of the second table are displayed correctly in Chrome 37, but it is not recommended to do this in Firefox 33 or Internet Explorer 11.

In principle, it looks like there is tbodyhidden content containing (only?), Then it will not be able to correctly display the borders for the entire table.

Is there a way around the borders to draw correctly?

I tried not to collapse the borders that seem to work, but leaves this table different than the other tables on the site.

Sample code for the script 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 />

- tbody display: none, :

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

:

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

, , .

, .hide tbody, TR, , , , , " ".

. , display: none TD, .hide TR html.

.hide td {
    display: none;
}
+1

More articles:


All Articles