CSS border-collapse not working in <table>

Question

I'm having an impossible time getting border-collapse to work for me. The page I'm working with has a table in it. The table has 2 columns, one for a label and the other for data. Sometimes there is no data to display, but I still need to rendor the table row and label column because I have a JQuery script that might need to write data to the data column. In other words, regardless of whether there is data or not, I need to rendor the table row as a placeholder. If there is no data I want the row to collapse.

In the html below, visibility:hidden is working since I won't see the label 'Condition:', but the row doesn't collapse. I've tried looking at it in FireFox 13, Safari 5 and IE 8. All three show the same problem - the row never ccollapses even though it doesn't display anything.

#data
{
    font-size: 95%;
}
#data table
{
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
}
#data table td
{
    padding-left: 5px;
}


<div id="data">

....

    <table>
        <tr style="visibility:hidden;">
            <td><div class="datalabel">Condition:</div></td>
            <td class="datainfo"></td>
        </tr>
    </table>

....

</div>

What more do I need to do to make this happen? I'd like it to be cross-browser compatible. I'm trying to support IE7 and above. I'm guessing someone is going to give me hell for using a table in the first place... ;)

Answer 1

The visibility property determines whether a given element is visible or not (visibility="visible|hidden"). However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.

Display VS Visibility

use display:none; to hide and display:block; to show

   <table style="border-collapse:collapse;">
        <tr style="display:none;">
            <td><div class="datalabel">Condition:</div></td>
            <td class="datainfo"></td>
        </tr>
    </table>

Note: border-collapse:collapse; is used in a situation, where you have borders specified for container and the contained and you want border to be displayed once.

Answer 2

<table border="0" cellpading="0" cellspacing="0">

and try to use and &nbps; or something like that, if you don't have data in a cell

something like:

<table border="0" cellpading="0" cellspacing="0">
    <tr style="visibility:hidden;">
        <td><div class="datalabel">Condition:</div></td>
        <td class="datainfo">&nbsp;</td>
    </tr>
</table>