Chrome Visibility: Collapse

Question

I have a page with several tables on it. To improve readability the body of each table is collapsed, so the user just sees the header and the footer. There is a button to toggle it to expand.

In IE and Firefox, it works great. But in Chrome and Safari, there is white space in the place of the collapsed row. Is there a workaround for those two browsers that will remove the white space?

Here is example code:

.collapse {
  visibility: collapse;
}

<table>
  <caption>This is a Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody class='collapse'>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL 1</td>
      <td>TOTAL 2</td>
    </tr>
  </tfoot>
</table>

Answer 1

Chrome and Safari treat visibility: collapse as visibility: hidden.

This will only work in Firefox/IE.

You can change it to display: none to make sure it works the same in all browsers, however this way you will miss the general idea of the collapse value, where all the width/height of the table's elements are calculated and take into account while affecting other elements in the table:

.collapse {
  display: none;
}

<table>
  <caption>This is a Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody class='collapse'>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL 1</td>
      <td>TOTAL 2</td>
    </tr>
  </tfoot>
</table>