8

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

3 回答 3

8

You are right, chrome doesn't properly support visibility:collapse for table rows and columns -- follow the bug for updates. We are planning on tackling it in the next few months but it probably won't show up in stable until the end of 2017. Sorry about the bad news.

于 2017-02-22T17:29:36.493 回答
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特定 s 中的所有 s col，请使用td:nth-of-type(n)选择器（替换n为列的索引号）。

于 2017-02-22T15:22:18.310 回答
0

As of Chrome 92, the symptoms are the same: <col style=visibility:collapse> renders the column invisible, but its width is not zero, so the table occupies the same width as if un-collapsed.

The idea of using <colgroup> + <col> is to avoid adding markup to every <td> in the column.

于 2021-08-12T18:20:51.040 回答