CSS:“可见性:崩溃”仍占用空间

时间:2017-08-24 12:24:30

标签: html css css3

我想要隐藏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中显示时,页面总是具有与未折叠行相同的高度,即使表本身不大并且其下方的文本与其保持距离也是如此。

如何防止这种情况发生?当我通过隐藏行“使表变小”时,我希望周围的页面也变小......

3 个答案:

答案 0 :(得分:2)

visibility属性,顾名思义,只会使元素不可见,但它们仍会占用空间。

如果你想在表格中隐藏一行,你可以在其上设置display: none

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:0)

在tr.collapsed中尝试display:none;它对我有用; P

答案 2 :(得分:0)

这有点作弊,但它会降低高度并保持行中单元格的宽度:

line-height

一些截图(描绘表格的底部,最后一个单元格更宽,以使列宽可见效果):

没有变化:

No change

padding已添加属性:

line-height property added

border已添加属性:

padding property added

visibility已添加属性:

border property added

/(.)@\[(.)\](.+type:)(.+)(.)/ 已添加属性:

visibility property added

正如你所看到的,呃,因为你必须相信我,页面没有任何高度作为可见表,但是折叠单元格的宽度仍然有效。 : - )