CSS: "visibility: collapse" 仍会占据空间

Question

CSS: "visibility: collapse" 仍会占据空间

8

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

我该如何防止这种情况发生？当我通过隐藏行来“缩小表格”时，希望周围的页面也变小...

- Bowi

https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility 不太确定它关于collapse的说明是什么意思。它被隐藏了，但表格大小被计算为如果它没有被隐藏，所以在视觉上空间还在那里哈哈 - Huangism

我将其解释为“未隐藏的行/列的尺寸计算方式与未隐藏时相同”。 - Bowi

但它说“它们原本占据的空间被移除了(就像对表格的列/行应用了display:none一样)”。无论如何，我从来没有使用过这个功能，也可能永远不会用到。 - Huangism

https://dev59.com/dlgQ5IYBdhLWcg3wxGvs - Michael Benjamin

4个回答

3

这有点作弊，但它可以减小行中单元格的高度并保持其宽度：

tr.collapsed {
    visibility: collapse;
    line-height: 0;
}
tr.collapsed * {
    padding: 0;
    border: none;
}

一些屏幕截图（描绘表格底部，最后一个单元格被加宽以使列宽效果可见）：

无变化：

line-height 属性已添加：

padding 属性已添加：

border 属性已添加：

visibility 属性已添加：

正如您所看到的，呃，您必须相信我，页面的高度不再与可见表格一样，但折叠单元格的宽度仍然会产生影响。 :-)

- Bowi

虽然这样做有些作弊，但对我来说很有效，因为我需要折叠的行参与水平列布局。由于我使用的是固定高度的行，所以我使用了高度而不是行高。 - TJSomething

2

将overflow: hidden;添加到表格元素中。

我无法重现您遇到的确切问题（我认为它在Firefox中可能已经修复），但在Firefox中添加overflow:hidden;仍会影响包含元素的.scrollHeight，这会导致保留大量空间并导致不正确的滚动条大小等问题。

- EoghanM

我刚刚尝试了一下，它确实似乎产生了期望的效果！ - Bowi

1

在 "tr.collapsed" 中尝试使用"display: none;"，这对我起作用了 ;P

- Dappy

当我切换类时，布局会“跳动”，因为在确定列宽度时将忽略该行。 - Bowi

也许尝试使用JS将该行的背景更改为正文中类似的背景或其他东西。 - Dappy

我不知道你的意思是什麼！:D - Bowi

抱歉我的英语还在学习中。尝试使用JavaScript更改背景颜色，使其与表格容器的背景颜色相同。行将消失但仍将存在。 - Dappy

但是行仍然会占用空间，这就是我想通过隐藏它来摆脱的。 - Bowi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Valentin · Accepted Answer

如其名，可见性（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>