visibility: collapse behaves exactly the same way as visibility: hidden in most formatting contexts: the space required by the element is “reserved” in the layout, but the element itself is not displayed, leaving an empty space where it would be.
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 significant difference: "strut". You can think of a layout as a zero placeholder size, which does not claim to have any place in the layout process, but nevertheless is still part of the formatting structure and is involved in calculations of a certain size.
A collapsed row table, for example, will not occupy a single vertical space in the table, but the columns of the table will still have an “as if” collapsed row size, and its contents were actually visible. This is to prevent columns from “wobbling” when rows are switched and exited. Likewise, the rolled up flex element does not occupy any space along the main axis, but still contributes to the cross-dimension of the flex line.
“Do not use display: none with tables” is a valuable rule of thumb, but it does not tell the whole story.
- Use
display: none if you do not want your hidden elements to participate in any way in the layout of the table (or the flexible line). - Use
visibility: collapse if you want to dynamically display and hide elements without destabilizing the layout of the table (or flex line).
Here is a code snippet showing 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 Mar 08 '16 at 23:53 on 2016-03-08 23:53
source share