CSS col 可见性：折叠在 Chrome 上不起作用答案

【问题标题】：CSS col visibility:collapse does not work on ChromeCSS col 可见性：折叠在 Chrome 上不起作用
【发布时间】：2017-07-12 17:39:02
【问题描述】：

我试图在 html 代码中隐藏一些 col。使用MDN colgroup 和col 都加了，我玩弄cols 的风格。

带有内容文本“可见”的<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>

【问题讨论】：

标签： css google-chrome html-table colgroup

【解决方案1】：

您是对的，chrome 不正确支持可见性：表格行和列的折叠 - 请关注 bug 以获取更新。我们计划在接下来的几个月内解决它，但它可能要到 2017 年底才能稳定显示。对于坏消息，我们深表歉意。

【讨论】：

还是什么都没有？
可见性：行的折叠现在应该可以工作，但列还不能工作，或者可能很快就会工作。
更新：列折叠终于在 Chrome 91 中工作了。

【解决方案2】：

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>

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

【讨论】：

错了。通过 W3，请参阅下一个：w3.org/Style/Examples/007/folding.en.html#view05
好吧，这更像是一种解决方法，因为它实际上在 Chrome 中运行良好。很抱歉提供错误信息。
这正是我在 dgrogan 写下他的答案后所做的。

【解决方案3】：

从 Chrome 92 开始，症状是相同的：

使列不可见，但其宽度不为零，因此表格占据与未折叠时相同的宽度。

使用

+ 的想法是避免为列中的每个添加标记。

【讨论】：

你能举一个测试用例的例子吗？ wpt.live/css/css-tables/visibility-collapse-col-005.html 具有并赋予列零宽度。

从 Chrome 94 开始，症状仍然存在。我无法在此处粘贴图像来说明。但问题是使列的宽度为零，但是从容器的可用宽度中减去未折叠的宽度。结果是折叠几列不允许未折叠的列展开，导致它们换行。

抱歉，我没有听从解释。我不认为我们对此有任何报告的问题，但我相信您这里可能存在错误。你能做一个 jsfiddle 或 codepen 或演示的东西吗？您可以在此处链接，我将提交 chrome 问题，或者您可以自己创建问题（crbug.com/new - 您可以跳过/删除“已测试的其他浏览器”部分）

这是一个简洁的测试用例：jsfiddle.net/ojkr8y62

哦。那是故意的。 developer.mozilla.org/en-US/docs/Web/CSS/visibility#values 的 Ctrl-f 表示“然而”，以获得简要说明。我在jsfiddle.net/dgrogan/ft90rqbj/4放了一个解释和演示。正如小提琴中的第 4 步所说，我没有看到一种简单的方法来做你想做的事。我提交了crbug.com/1257766。如果有人想要@dave 所描述的换行行为，请给错误加注星标并添加您的用例的简要说明。