Revision Content

Summary

The hidden value hides an element but leaves space where it would have been.

The collapse value hides rows or columns of a table. It also collapses XUL elements.

{{ Xref_cssinitial() }}: {{ Cssxref("visible") }}

Applies to: All elements

{{ Xref_cssinherited() }}: Yes

Media: {{ Xref_cssvisual() }}

{{ Xref_csscomputed() }}: As specified

Syntax

visibility: visible | hidden | collapse | {{ Cssxref("inherit") }}

Values

visible

Default value, the box is visible.

hidden

The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).

collapse

For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is (as if {{ Cssxref("display") }}: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. For other elements, collapse is treated the same as hidden.

Notes

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.

visibility:collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility:visible is specified explicitly on nested tables.