CSS col visibility:collapse does not work on Chrome

问题

I'm trying to hide some col's in html code. Using MDN colgroup and col are added, and I'm playing with the style of the cols.

The <td> with content text 'visible' is visible in all browsers (good), the with content text 'hidden' is visible in chrome (bad) and hidden in Firefox and Edge. (good).

Shortest code I could re-create problem is here:

<!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:

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.

回答2:

The visibility: collapse should not be assigned to col, but td. This will work fine:

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>

If you want to hide all tds from a specific col, use td:nth-of-type(n) selector (replacing n with the index number of column).

来源：https://stackoverflow.com/questions/42395438/css-col-visibilitycollapse-does-not-work-on-chrome

标签

css

google-chrome

html-table

colgroup