CSS col visibility:collapse 不适用于 Chrome

Question

我试图在 html 代码中隐藏一些列。使用MDN添加了colgroup和col，我在玩cols的样式

内容文本 'visible' 的 <td> 在所有浏览器中可见（好），内容文本 'hidden' 在 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>

Answer 1

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 中的所有 td，请使用 td:nth-of-type(n) 选择器（将 n 替换为列的索引号）。

Answer 2

你是对的，chrome 没有正确支持 table 行和列的 visibility:collapse -- 按照 bug 进行更新。我们计划在接下来的几个月内解决它，但它可能要到 2017 年底才会出现在 stable 中。很抱歉坏消息。

Answer 3

从 Chrome 92 开始，症状相同：使列不可见，但其宽度不为零，因此 table 占用相同未折叠时的宽度。

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

CSS col visibility:collapse 不适用于 Chrome

CSS col visibility:collapse does not work on Chrome

css

google-chrome

html-table

colgroup