CSS col visibility:collapse does not work on Chrome

Question

CSS col visibility:collapse does not work on Chrome

3.6k Views Asked by Guy Dafny At 18 April 2025 at 10:25

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>

Original Q&A

There are 3 best solutions below

JoannaFalkowska On 22 February 2017 at 15:22

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).

dave mausner On 12 August 2021 at 18:20

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.

**dgrogan** · Accepted Answer

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.

CSS col visibility:collapse does not work on Chrome

There are 3 best solutions below

Related Questions in CSS

Related Questions in GOOGLE-CHROME

Related Questions in HTML-TABLE

Related Questions in COLGROUP

Trending Questions

Popular # Hahtags

Popular Questions