我想隐藏HTML表中的行,我用visibility: collapse;来实现。现在我意识到当我这样做的时候桌子的高度会缩小(应该是这样!),但页面高度保持不变,留下可滚动的空白。
举个例子:

<!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>

在Firefox或IE中显示时,页面的高度始终与行未折叠时的高度相同,即使表本身不太大,并且下面的文本与表之间没有距离。
我怎样才能防止这种情况发生?当我通过隐藏行来“使表变小”时,我希望周围的页面也变小。。。

最佳答案

顾名思义,visibility属性只会使元素不可见,但它们仍然占用空间。
如果您想隐藏表中的一行,只需在其上设置display: none

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>

09-07 18:30