CSS col visibility:collapse does not work on Chrome

Question

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>

Related question on [stackoverflow](https://stackoverflow.com/questions/71752219/collapsed-table-columns-leave-visible-artifacts-behind) — Martin, Apr 22 '22 at 14:56
Current bug tracking ticket on [bugs.chromium.org](https://bugs.chromium.org/p/chromium/issues/detail?id=1266352) — Martin, Apr 22 '22 at 14:59

score 8 · Accepted Answer · answered Feb 22 '17 at 17:29

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.

answered Feb 22 '17 at 17:29

dgrogan

2,587
1
17
21

Still nothing ? – Dan Mar 15 '19 at 01:24
visibility:collapse for rows should work now but not columns yet, or probably anytime soon. – dgrogan Mar 15 '19 at 17:30
Update: Column collapsing finally works in Chrome 91. – dgrogan Jul 06 '21 at 22:27
@dgrogan But it's [still buggy in current Chrome](https://stackoverflow.com/questions/71752219/collapsed-table-columns-leave-visible-artifacts-behind) Version 100.0.4896.127 (64-Bit) – Martin Apr 22 '22 at 14:02

score 0 · Answer 2 · answered Feb 22 '17 at 15:22

0

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

answered Feb 22 '17 at 15:22

JoannaFalkowska

2,771
20
37

2

Wrong. By W3, see the next : https://www.w3.org/Style/Examples/007/folding.en.html#view05 – Guy Dafny Feb 23 '17 at 12:03
1

All right, it's more of a workaround because that actually works fine in Chrome. Sorry for misinformation. – JoannaFalkowska Feb 23 '17 at 13:36
this is exactly what I did once dgrogan had wrote his answer. – Guy Dafny Feb 26 '17 at 06:16

score 0 · Answer 3 · answered Aug 12 '21 at 18:20

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.

answered Aug 12 '21 at 18:20

dave mausner

1
1

Could you give an example test case? http://wpt.live/css/css-tables/visibility-collapse-col-005.html has and gives the column zero width. – dgrogan Oct 05 '21 at 21:46
As of Chrome 94, the symptom remains. I cannot paste an image here to illustrate. But the problem is that 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. – dave mausner Oct 07 '21 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 (https://crbug.com/new -- you can skip/delete "Other browsers tested" section) – dgrogan Oct 07 '21 at 18:06
Here is a concise test case: https://jsfiddle.net/ojkr8y62/ – dave mausner Oct 07 '21 at 18:12
Oh. That is intentional. Ctrl-f for 'however' at https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#values for a brief explanation. I put an explanation and demo in https://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 https://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. – dgrogan Oct 07 '21 at 20:38

CSS col visibility:collapse does not work on Chrome

3 Answers3

Linked