CSS Visibility Collapse for Table Rows Explained

The CSS property visibility: collapse is a specialized styling value designed primarily for internal table elements such as rows (<tr>), row groups (<tbody>), and columns (<col>). It allows developers to completely hide table elements without disrupting the overall layout geometry of the table. By removing the visible row while preserving the column width calculations, visibility: collapse enables dynamic row removal without triggering a heavy layout reflow, offering a distinct performance and visual advantage over display: none and visibility: hidden.

The Problem with Traditional Hiding Methods

When managing dynamic data in HTML tables, standard CSS hiding techniques present distinct trade-offs:

• display: none: This removes the element entirely from the document rendering tree. When applied to a <tr>, the browser must recalculate the width of every column in the table because the contents of the hidden row no longer contribute to the table's sizing algorithm. This recalculation causes an expensive layout reflow and can make columns visibly jump or shift in width.
• visibility: hidden: This keeps the row invisible, but the element still occupies its original visual space. The row's height remains intact, resulting in an awkward, empty gap inside the table structure.

How visibility: collapse Solves Layout Reflow

When applied to table rows, visibility: collapse combines the visual benefits of display: none with the layout stability of visibility: hidden:

1. Space Collapsing: The targeted table row has its height reduced to zero, visually removing it from view just like display: none. No empty vertical gap is left behind.
2. Sizing Preservation: The browser still includes the contents of the collapsed row when calculating column widths. Because the column dimensions remain locked to the widest cells across the entire dataset, removing or restoring rows does not cause columns to dynamically stretch or shrink.
3. Reflow Prevention: Because column widths do not need to be recomputed, the browser avoids a full table reflow. It only needs to perform a localized repaint and adjust the vertical position of following rows, resulting in smoother performance during intensive operations like live filtering or sorting.

Syntax and Implementation

To collapse a table row, apply the property directly to the row or a specific class:

.hidden-row {
  visibility: collapse;
}

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$10.00</td>
    </tr>
    <tr class="hidden-row">
      <td>Widget B (Hidden without column reflow)</td>
      <td>$25.00</td>
    </tr>
    <tr>
      <td>Widget C</td>
      <td>$15.00</td>
    </tr>
  </tbody>
</table>

Behavior on Non-Table Elements

The W3C specification dictates that when visibility: collapse is applied to non-table elements (such as standard <div>, <section>, or <p> tags), it defaults to the exact same behavior as visibility: hidden. The element will become invisible, but its original width, height, and layout footprint will remain intact on the page. Therefore, its reflow-prevention properties should only be leveraged within structural HTML tables.