102

What is the difference between visibility:collapse and display:none?

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Veera
  • 1,021
  • 2
  • 7
  • 3

5 Answers5

117

Short version:

The former is used to completely hide table elements. The latter is used to completely hide everything else.

Long version:

visibility: collapse hides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.

If used on elements other than table elements, visibility: collapse will act like visibility: hidden. This makes an element invisible, but it will still occupy space in the layout.

display: none hides an element entirely, so it doesn't occupy any space in the layout, but it shouldn't be used on table elements.

W3C Reference

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 11
    This is useful, but a citation or explanation for the claim that `display: none` shouldn't be used on table elements would be a nice addition. – Mark Amery Feb 03 '15 at 13:43
  • 1
    @MarkAmery A good reason to not use `display: none;` is because it breaks tables using `colspan` and `rowspan`. – Dai May 30 '20 at 23:43
  • 1
    @MarkAmery As Dai mentioned, if you use `display: none;` on a table cell then the table is displayed as if that cell weren't there at all: it will shift the other cells left to occupy that space instead. – Brandon Dec 12 '22 at 19:15
41

visibility: collapse behaves exactly like visibility: hidden in most formatting contexts: the space required by the element is 'reserved' in the layout, but the element itself is not rendered, leaving a blank space where it would have been.

There are three exceptions that I know of: table-rows, table-columns and flex items, in which visibility: collapse behaves like display: none, but with one major difference: the 'strut'. You can think of the strut as a zero-sized placeholder, that doesn't claim any space of its own in the layout process, but is nevertheless still part of the formatting structure and participates in some size computations.

A collapsed table-row, for example, will not occupy any vertical space in the table, but the table columns will still be dimensioned 'as-if' the collapsed row and its contents were actually visible. This is to prevent columns from 'wobbling' as rows are toggled in and out. Likewise, a collapsed flex item doesn't occupy any space along the main axis, but still contributes to the flex line cross-size.

'Do not use display: none with tables' is a valuable rule of thumb, but it doesn't tell the whole story.

  • Use display: none if you don't want your hidden elements to participate in any way in the table (or flex line) layout process.
  • Use visibility: collapse if you want to dynamically show and hide elements without destabilizing the table (or flex line) layout.

Here is a code snippet demonstrating the difference between display: none and visibility: collapse for a table row:

.show-right-border {
  border-right: 1px black solid;
}
<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>
Mathieu Renda
  • 14,069
  • 2
  • 35
  • 33
  • 2
    Only one telling the full story. @Mathieu Renda you should edit the main answer adding all this knowledge. – Áxel Costas Pena May 06 '16 at 11:56
  • `visibility:collapse` doesn't work for tables in Safari. I found `display:none` to work fine on table rows (including in Safari) although the comments above about column width are correct – roadnottaken Apr 10 '19 at 16:15
20

visibility:collapse should only be used on tables. On other elements it will act as a visibility:hidden.

visibility:hidden hide the element but still take the space of the element whereas display:none won't even keep the space.

Resources :

On the same topic :

Community
  • 1
  • 1
Colin Hebert
  • 91,525
  • 15
  • 160
  • 151
5

visibility:collapse has a display:none behavior only for table elements. On other elements, it should render as hidden.

zneak
  • 134,922
  • 42
  • 253
  • 328
1

You can also apply visibility: collapse on an element under a flexbox container (a flex item). It will act as you're applying it on an element with display: table-row or display: table-column

Vladyn
  • 437
  • 1
  • 5
  • 14