Visibility:collapse is rendered as visibility:hidden

Question

Collapse

Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as hidden.

http://www.w3schools.com/cssref/pr_class_visibility.asp

However, the element is still taking up space like visibility: hidden. I've tested on Safari and Chrome. Anyone have a solution where the table layout is maintained but the space is removed?

Answer 1

It won't work as intended on all browsers, only Firefox and IE (I can't confirm IE right now). The MDN docs on visibility say:

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

You can test it with this jsFiddle: http://jsfiddle.net/meT7k/. In Chrome, the first row is rendered as visibility: hidden. In Firefox, collapse is applied correctly.

In Chrome, you get the desired results when applying display: none to the row instead. However, that will probably force a re-layout of the whole table (e.g., column widths may change after the display property is changed).