CODEWITHSUNDEEP
htmlcssfirefox
Iain
Iain

Reputation: 10759

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

Given the following HTML page a horizontal line appears at the top of the table where the 1st row would have a 2nd and 3rd cell (if they were defined). 

<html>
<head>
<Title>Test Page</Title>

<style type="text/css">
table {
    margin:10px 0 10px 0;
    padding:0;
    margin: 0 0 0 0;
    border-collapse: collapse;
    border: 0;
}

td {
    border:1px solid #CCCCCC;
    padding:5px;
}
</style>

</head>
<body>
    <table>
        <tr>
            <td>Test Title</td>
        </tr>
        <tr>
            <td>Sub Title</td>
            <td>Sub Title</td>
            <td>Sub Title</td>
        </tr>
    <table>
</body>
</html>

I would like the line (highlighted below) removed by modifying CSS only. This line appears in Firefox but not IE6.

Example Image

Note that I cannot modify the HTML in any way as this is generated by a third party system (the example above is simply to highlight the issue). This third-party system only allows me to modify the CSS.

Upvotes: 2

Views: 5087

Answers (6)

Abdullah
Abdullah

Reputation:

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

Upvotes: 0

Сыч
Сыч

Reputation: 929

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.

Upvotes: 3

Bob
Bob

Reputation: 99804

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

Upvotes: 0

Zack The Human
Zack The Human

Reputation: 8481

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?

Upvotes: 0

Nick Allen
Nick Allen

Reputation: 12220

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

Upvotes: 0

Jeremy L
Jeremy L

Reputation: 7797

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.

Upvotes: -1

Related Questions