我想隐藏 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 中显示时，页面始终具有相同的高度，就好像行没有折叠一样，即使表格本身并不大并且其下面的文本与它不保持距离。
我怎样才能防止这种情况发生？当我通过隐藏行“使表格变小”时，我希望周围的页面也变小......
顾名思义，可见性属性只会使元素不可见，但它们仍然占用空间。
如果你想隐藏表格中的一行，你可以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>