CSS col visibility:collapse does not work on Chrome

Asked 22/2, 2017 at 15:17 Answered 12/8, 2021 at 18:20

Solved css google-chrome html-table colgroup

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>

Surfactant answered 22/2, 2017 at 15:17 Comment(2)

Related question on stackoverflow – Radiopaque 22/4, 2022 at 14:56

Current bug tracking ticket on bugs.chromium.org – Radiopaque 22/4, 2022 at 14:59

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.

Rhyolite answered 22/2, 2017 at 17:29 Comment(5)

Still nothing ? – Pluto 15/3, 2019 at 1:24

visibility:collapse for rows should work now but not columns yet, or probably anytime soon. – Rhyolite 15/3, 2019 at 17:30

Update: Column collapsing finally works in Chrome 91. – Rhyolite 6/7, 2021 at 22:27

@Rhyolite But it's still buggy in current Chrome Version 100.0.4896.127 (64-Bit) – Radiopaque 22/4, 2022 at 14:2

@dgrogan, even today, visibility: collapse set to a colgroup does not hide the associated <th> cell. – Katheleenkatherin 20/6 at 5:51

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

Dovap answered 22/2, 2017 at 15:22 Comment(3)

Wrong. By W3, see the next : w3.org/Style/Examples/007/folding.en.html#view05 – Surfactant 23/2, 2017 at 12:3

All right, it's more of a workaround because that actually works fine in Chrome. Sorry for misinformation. – Dovap 23/2, 2017 at 13:36

this is exactly what I did once dgrogan had wrote his answer. – Surfactant 26/2, 2017 at 6:16

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.

Latinity answered 12/8, 2021 at 18:20 Comment(5)

Could you give an example test case? wpt.live/css/css-tables/visibility-collapse-col-005.html has <col span="2" style="background:#F00; visibility: collapse"/> and gives the column zero width. – Rhyolite 5/10, 2021 at 21:46

As of Chrome 94, the symptom remains. I cannot paste an image here to illustrate. But the problem is that <col style="visibility:collapse"> gives the column zero width, but the un-collapsed width is subtracted from the available width of the container. The result is that collapsing several columns does not allow the un-collapsed columns to expand, causing them to line-break. – Latinity 7/10, 2021 at 17:42

Apologies, I'm not following the explanation. I don't think we have any reported issues about this but I believe you that there is a probable bug here. Could you make a jsfiddle or codepen or something that demonstrates? You can either link that here and I'll file a chrome issue or you can create the issue yourself if you'd like (crbug.com/new -- you can skip/delete "Other browsers tested" section) – Rhyolite 7/10, 2021 at 18:6

Here is a concise test case: jsfiddle.net/ojkr8y62 – Latinity 7/10, 2021 at 18:12

Oh. That is intentional. Ctrl-f for 'however' at developer.mozilla.org/en-US/docs/Web/CSS/visibility#values for a brief explanation. I put an explanation and demo in jsfiddle.net/dgrogan/ft90rqbj/4. As step 4 in the fiddle says, I don't see an easy way to do what you want. I filed crbug.com/1257766. If anyone wants the line-breaking behavior described by @dave, please star the bug AND add a brief explanation of your use case. – Rhyolite 7/10, 2021 at 20:38

Recommended topics

Hot tags