What is the difference between visibility: collapse and display: none in table elements?
Understanding the Difference Between visibility: collapse and display: none in Table Elements
In CSS, both visibility: collapse and display: none can hide table rows or columns, but they behave differently depending on the browser and table structure. The key distinction is how the table layout and spacing are handled when these properties are applied.
- 1
display: noneremoves the element completely from the layout, just like with any other element type. The table behaves as if the row or column never existed. - 2
visibility: collapsehides the element visually, but its space may or may not be preserved depending on the element type and browser implementation. - 3
In most browsers, for table rows (
<tr>) and columns (<col>),visibility: collapseremoves the space but allows the layout to recalculate dynamically. - 4
For non-table elements,
visibility: collapsebehaves the same asvisibility: hidden(the element becomes invisible but still occupies space).
In the first table, the hidden row is completely removed from layout. In the second, the row may collapse and allow rows below to shift up, but the behavior can differ slightly across browsers.
- 1
Use
display: nonewhen you want to completely remove a table row or column from both layout and accessibility trees. - 2
Use
visibility: collapsewhen you want the table layout to adjust dynamically while maintaining the logical structure of the table. - 3
Be aware of cross-browser inconsistencies, especially with complex tables or when using
visibility: collapseoutside of table elements. - 4
For consistent cross-browser behavior, prefer
display: noneunless you specifically need table collapsing behavior.