CSS中的col visibility:collapse在Chrome上不起作用。

Question

CSS中的col visibility:collapse在Chrome上不起作用。

9

我正在尝试隐藏HTML代码中的某些列。使用MDN colgroup和col添加了这些列，我正在调整列的样式。

带有内容文本“visible”的<td>在所有浏览器中都可见（很好），带有内容文本“hidden”的<td>在Chrome中可见（不好），而在Firefox和Edge中隐藏（很好）。

我能重新创建问题的最短代码在这里：

<!doctype html>
<html>
    <head>
        <title>css example</title>
        <style type='text/css'>
            col.visible {}
            col.hidden { visibility:collapse; }
        </style>
    </head>
    <body>
        <table border='1'>
            <colgroup>
                <col class='visible'>
                <col class='hidden'>
                <tbody>
                    <tr>
                        <td>visible</td>
                        <td>hidden</td>
                    </tr>
                </tbody>
            </colgroup>
        </table>
    </body>
</html>

- Guy Dafny

有关stackoverflow上的相关问题。 - Martin

目前在 bugs.chromium.org 上的错误跟踪工单。 - Martin

3个回答

0

visibility: collapse 不应该被赋给 col，而是应该赋给 td。这样做会很好：

td.hidden { visibility:collapse; }

    <body>
        <table border='1'>
            <colgroup>
                <col>
                <col>
                <tbody>
                    <tr>
                        <td>visible</td>
                        <td class='hidden'>hidden</td>
                    </tr>
                </tbody>
            </colgroup>
        </table>
    </body>

如果您想要隐藏特定列中的所有，请使用td:nth-of-type(n)选择器（将n替换为列的索引号）。

- JoannaFalkowska

2

错误的。请参考W3，查看下一个链接：https://www.w3.org/Style/Examples/007/folding.en.html#view05 - Guy Dafny

1

好的，这更像是一个变通方法，因为在Chrome中它实际上运行良好。对于错误信息我表示抱歉。 - JoannaFalkowska

这正是我在dgrogan回答后所做的。 - Guy Dafny

0

从Chrome 92开始，症状是相同的：<col style=visibility:collapse>会使列不可见，但其宽度不为零，因此表格占用的宽度与未折叠时相同。

使用<colgroup> + <col>的想法是为了避免在每个<td>中添加标记。

- dave mausner

你能给一个测试用例的例子吗？http://wpt.live/css/css-tables/visibility-collapse-col-005.html有一个<col span="2" style="background:#F00; visibility: collapse"/>，并使列宽为零。 - dgrogan

从Chrome 94版本开始，这个问题依然存在。我无法在此处粘贴图片以进行说明。但问题在于 <col style="visibility:collapse"> 会使列的宽度变为零，但未折叠的宽度会从容器的可用宽度中减去。其结果是折叠多个列不允许未折叠的列扩展，导致它们断行。 - dave mausner

抱歉，我没有理解这个解释。我认为我们没有关于此的任何报告问题，但我相信你在这里可能有一个潜在的错误。你能否创建一个jsfiddle或codepen或其他演示呢？你可以在这里链接它，我会提交一个chrome问题，或者如果你愿意，你也可以自己创建问题（https://crbug.com/new--你可以跳过/删除“已测试的其他浏览器”部分）。 - dgrogan

这是一个简洁的测试案例：https://jsfiddle.net/ojkr8y62/ - dave mausner

哦，那是有意为之的。在 https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#values 中使用 Ctrl-f 查找“however”以获取简要说明。我在 https://jsfiddle.net/dgrogan/ft90rqbj/4/ 中放置了一个说明和演示。正如 fiddle 中的第 4 步所述，我没有看到实现您想要的功能的简单方法。我已提交了 https://crbug.com/1257766。如果有人想要 @dave 描述的换行行为，请给该 bug 打星并添加您的用例的简要说明。 - dgrogan

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

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

- dgrogan · Accepted Answer

您说得对，Chrome浏览器并没有很好地支持表格行和列的visibility:collapse属性 -- 可以关注错误以获取更新。我们计划在接下来的几个月内解决这个问题，但这可能要到2017年底才会在稳定版中显示。对于这个不好的消息我们深感抱歉。