CODEWITHSUNDEEP
htmlcss
Bowi
Bowi

Reputation: 1528

CSS: "visibility: collapse" still takes up space

I want to hide rows from a HTML table, and I do that with visibility: collapse;. Now I've realized that the table height shrinks when I do that (as it should!), but that the page height stays the same, leaving an empty space scrollable.

Consider this example:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            table {
                border-collapse: collapse;
                background-color: #a0a0a0;
            }
            td {
                border: 1px solid black;
                font-size: 120%;
            }
            tr.collapsed {
                visibility: collapse;
            }
            html {
                background-color: #c0c0c0;
            }
        </style>
    </head>
    <body>
        <table>
            <tr><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td></tr>
            <!-- Repeat this line 20 times -->
            <tr class="collapsed"><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td></tr>
            <!-- Repeat this line 20 times as well-->
        </table>
        <p>
            Hello!
        </p>
    </body>
</html>

When showing that in Firefox or IE, the page always has the same height as if the rows weren't collapsed, even if the table itself is not larger and the text underneath it does not keep distance to it.

How can I prevent this from happening? When I "make the table smaller" by hiding rows, I hope that the surrounding page gets smaller as well...

Upvotes: 9

Views: 11676

Answers (4)

EoghanM
EoghanM

Reputation: 26944

Add overflow: hidden; to the table element.

I can't recreate the exact problem you are having (I think it might be fixed in Firefox) but adding overflow:hidden; does still affect the .scrollHeight of the containing element in Firefox, which has the effect of reserving lots of space and causing e.g. incorrect scrollbar sizes.

Upvotes: 2

Bowi
Bowi

Reputation: 1528

This is a bit of cheating, but it reduces the height and keeps the width of the cells in the row:

tr.collapsed {
    visibility: collapse;
    line-height: 0;
}
tr.collapsed * {
    padding: 0;
    border: none;
}

Some screenshots (depicting bottom of the table, the last cell is made wider to make the effect on the column width visible):

No change:

No change

line-height property added:

line-height property added

padding property added:

padding property added

border property added:

border property added

visibility property added:

visibility property added

As you can see, erm, as you have to believe me, the page has not any more height as the visible table, but the width of the collapsed cell still has effect. :-)

Upvotes: 3

Valentin
Valentin

Reputation: 2858

The visibility property, as the name implies, only makes elements invisible, they still take up space though.

If you want to hide a row in a table you could just set display: none on it.

table {
  border-collapse: collapse;
  background-color: #a0a0a0;
}
td {
  border: 1px solid black;
  font-size: 120%;
}
tr.collapsed {
  display: none
}
html {
  background-color: #c0c0c0;
}
<table>
  <tr><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td></tr>
  <!-- Repeat this line 20 times -->
  <tr class="collapsed"><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td><td>Test 1 2 3</td></tr>
  <!-- Repeat this line 20 times as well-->
</table>
<p>
  Hello!
</p>

Upvotes: 6

Dappy
Dappy

Reputation: 89

in tr.collapsed try display: none; it worked for me ;P

Upvotes: 1

Related Questions