Visibility in Tables

Why won't the borders disappear

[felix]

I want to create tables that appear and disappear according to a script execution. They have to start out invisible, so I have CSS something like this (simplified):

table#appears { 
 border:1px solid #CCFF00;  
 visibility:hidden; 
}

The table starts out hidden, but the border is still visible. If I subsequently show and hide the table using javascript, the borders disappear. I.e. this (also simplified) works.

function hideTable() { 
 document.getElementById('appears').style.visibility="visible" 
 document.getElementById('appears').style.visibility="hidden" 
}

I have found this to be true in IE5.0, IE5.5, IE6 and NN7. Has anyone had to deal with this before?

[korkus2000]

Do you have borders turned on in the table? border="1"?

[felix]

Yes, I've tried it with border="1" and without using the borders attribute. Setting the style should make the border attribute unnecessary, and it does appear to work that way.

[BlobFisk]

Have you tried border="0" in the html?

[felix]

Yes, I just tried border="0" in the table tag. No luck.

[korkus2000]

What happens if you put an inline style for hidden in the table; Border or no Border?

[felix]

I tried <table style="visibility:hidden">. Same problem. I also tried adding style="visibility:hidden"> to each tr and td. Nothing. It's quite frustrating.

The only workaround I can come up with is to make the table background a different color than the cells. Then using cell spacing, I can adjust the width of these pseudo-borders. That is not a very attractive solution, but it seems to work.

Owner edit - Oh, and with no borders, visibility:hidden works just as expected.
Corrected Syntax

[BlobFisk]

I'm clutching at straws a little here, but have you tried display="none" rather than visibility?

[felix]

Nope. Now I can't get the table to reappear. I think that is right. According to the CSS recommendation, display:none prevents a box for the element from ever being created.

It also appears that the visibility behavior of not hiding the borders may not be altogether incorrect either (at least from the CSS point of view). visibility is only supposed to effect blocks. Without studying the DOM and CSS defintitions closely, I'm guessing that the border may not technically be part of the block - rather it surrounds a block, so it may not be affected by changing the visibility attribute. Funny the js works, though.

It looks like I'm stuck using a less attractive (but not all that bad) workaround.

Thanks korkus2000 and BobFisk for your suggestions.