Difference between "visibility:collapse" and "display:none"
HtmlCssHtml Problem Overview
What is the difference between visibility:collapse and display:none?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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: noneif you don't want your hidden elements to participate in any way in the table (or flex line) layout process. - Use
visibility: collapseif 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>
Solution 3 - Html
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 :
Solution 4 - Html
visibility:collapse has a display:none behavior only for table elements. On other elements, it should render as hidden.
Solution 5 - Html
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