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…



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

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.

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:

line-height property added:

padding property added:

border 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. 🙂