CODEWITHSUNDEEP
cssgoogle-chromevisibility
Adam
Adam

Reputation: 33

Chrome Visibility: Collapse

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>

Upvotes: 3

Views: 1896

Answers (1)

Dekel
Dekel

Reputation: 62566

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>

Upvotes: 4

Related Questions