Question

我正试图在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>

Answer 1

您是对的，Chrome不能正确支持可见性：表行和列折叠 - 请按bug进行更新。我们计划在未来几个月内处理它，但它可能在2017年底之前不会出现稳定。对坏消息感到抱歉。

Answer 2

不应将dist分配给visibility: collapse，而应col。td。这样可以正常工作：

＆＃13;

td.hidden { visibility:collapse; }

＆＃13;

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

＆＃13;

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

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

2 个答案: