CSS col 可见性：折叠在 Chrome 上不起作用
Posted
技术标签:
【中文标题】CSS col 可见性：折叠在 Chrome 上不起作用【英文标题】：CSS col visibility:collapse does not work on 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>
【问题讨论】：
【参考方案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 具有以上是关于CSS col 可见性：折叠在 Chrome 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章