visibility:collapse IE workaround

Need IE equiv

[Demaestro]

I want to hide some rows in a table

So I used:

visibility:hidden;

The row doesn't display but it still holds it's place on the page causing rows above and below the hidden row to have missing space between where the hidden row is.

So I come across:

visibility:collapse;

Works great does what I want... hides the row and doesn't leave a placeholder space.

Doesn't work in any IE version.. or Safari.

Anyone know of a elegant work-around or do I have a lot of work ahead of me converting this table to something else?

For the record I think that keeping a place holder on the page is the worst behavior most anti-intuitive thing... does a hidden input box take up space in a page? No? Then why would a hidden row?

Sorry I had to rant there.

Any help would be so appreciated.

thanks

[Demaestro]

I tried use height:0px; on the row to collapse it manually and no luck with that..

Still stuck..

[Demaestro]

Well the reason I couldn't find a good solution was because I was looking for a visibility value

The real solution came in the display style

The solution:

Use display:none; to remove the space. To get it back you will need to use display:block; For IE and display:table-row; for FF

[edited by: Demaestro at 6:30 pm (utc) on Oct. 3, 2007]

[Gibble]

actually just set display to nothing, instead of block, so it goes back to the default

[Demaestro]

Ya it does.... thanks Gibble saves me 2 lines of JS.. sounds dumb but I am all about efficient code.

[edited by: Demaestro at 7:09 pm (utc) on Oct. 3, 2007]

[mindjoy]

Good news! Although "visibility: collapse" works wonderfully in Mozilla browsers, of course, it does not work in Internet Explorer. Fortunately, however, I found out that "display: table-row-group" for "<tbody>" has the same (desired) effect in Mozilla, Opera and IE (it's a default value for group of table rows). I haven't tested it but you should use "display: table-row" for individual rows. Cheers!