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?

the link to http://www.w3schools.com/cssref/pr_class_visibility.asp clearly specifies that if you want to creat invisible elemets that do not take place, you should use display instead of visibility. — Shadowxvii, Oct 03 '12 at 14:09
The issue with using display: none is that it affects the table layout. I want to maintain the table layout and hide the element. — Verdi Erel Ergün, Oct 03 '12 at 14:10
If you remove a row or column you will have to re-layout the table. With `collapse` you do not have that issue. Are you sure you want that? — Matt K, Oct 03 '12 at 14:20
@Dipaks, `display: none` takes an element out of the flow. `visibility: hidden` does not. — Sparky, Oct 03 '12 at 14:29
@Dipaks That is, `display:none` takes up no space, while `visibility:hidden` still takes up space but is invisible. — Roddy of the Frozen Peas, Oct 03 '12 at 14:31

bfavaretto · Accepted Answer · 2012-10-03T14:43:52.127

9

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

edited Oct 03 '12 at 14:43

answered Oct 03 '12 at 14:38

bfavaretto

71,580
16
111
150

bfavaretto, seems like visibility:collapse isn't incorporated into browser support for webkit browsers. – Verdi Erel Ergün Oct 07 '12 at 15:34
Looks like that's it. FF supports it, and according to [msdn](http://msdn.microsoft.com/en-us/library/ie/ms531180(v=vs.85).aspx), ie8+ supports it too. – bfavaretto Oct 07 '12 at 15:59
It is a little late but you can get it to work in Chrome [this way](http://stackoverflow.com/questions/25807564/hiding-a-tr-while-still-involving-it-in-width-calculations/25807729#25807729) – Hashem Qolami Oct 04 '14 at 22:08

Ryan · Answer 2 · 2012-10-03T14:26:41.437

-1

Wrap the contents in a <span></span> and set the display to none.

edited Oct 03 '12 at 14:26

answered Oct 03 '12 at 14:21

Ryan

288
3
11

1

`display: none` takes an element out of the flow. `visibility: hidden` does not. – Sparky Oct 03 '12 at 14:29
display:none forces a re-lay out of the table. – Verdi Erel Ergün Oct 07 '12 at 15:35
Just to clarify, my suggestion was to wrap the cell contents in a span, which should not affect the table. – Ryan Oct 08 '12 at 17:44
how do you undo the display: none? is it gone forever? – tofutim Nov 03 '16 at 05:56
To wrap a cell in a span would be invalid html. – Ewan Oct 25 '22 at 15:32

Visibility:collapse is rendered as visibility:hidden

2 Answers2