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... ;)