我想要隐藏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中显示时,页面总是具有与未折叠行相同的高度,即使表本身不大并且其下方的文本与其保持距离也是如此。
如何防止这种情况发生?当我通过隐藏行“使表变小”时,我希望周围的页面也变小......
答案 0 :(得分:2)
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
在tr.collapsed中尝试display:none;它对我有用; P
答案 2 :(得分:0)