Hide border on table where no cell exists in Firefox and border-collapse: collapse;

Answer 1

From Firefox Colspan Border-COllapse Bug:

The obvious workaround is to just set the colspan before the DOM has finished loading, or at minimum, before the table has finished rendering. However, this requires that we clutter our otherwise clean HTML with inline tags, or have prior knowledge of the number of columns at the HTML generation stage.

I hope to find a more elegant "non-invasive JavaScript" solution in the future, but at the current time I don't know of one. Simply setting the table's "display" style to "none" and then re-setting it back to "block" did not do the trick.

Answer 2

EDIT: Your third party tool is generating bad/invalid markup which will give you a very large browser compatibility/css headache, if it is at all feasible, replace it or generate the html yourself

Technically speaking the first row should be marked up as

    <tr>
        <td colspan="3">Test Title</td>
    </tr>

So I don't think you can acheive that using tables.

A css tip

margin: 10px 0;

Puts 10px at the top and bottom and 0 on the left and right

Answer 3

This will get it to render without the top border in Firefox:

table, td {
    border: 1px #CCC;
}

table {
    margin: 0;
    border-spacing: 0;
    border-style: none none solid solid;
}

* html table {
    border-collapse: collapse;
}

td {
    border-style: solid solid none none;
    padding: 5px;
}

It also works fine in IE7 for me. If it breaks in IE6, use conditional comments or css hacks to revert it to the state it was in your own code for IE6 only.

Answer 4

The empty-cells property may help you in this case.

table {
  empty-cells:hide;
}

Then again, maybe not. Can you also explicitly turn off the border of the table rows?

Answer 5

Is using javascript an option? You could inject a non breaking space into the cell, that should draw the border.

Answer 6

Hi there,

Here is the solution for this problem that really works. I found this out after sooo long

The problem is with tbody tag.

Check the solution here: http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table