The CSS property col visibility:collapse is ineffective on the Chrome browser

I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns.

The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with the text 'hidden' is only visible in Chrome (not so good) and hidden in Firefox and Edge (good).

Here is the concise code snippet that reproduces the issue:

<!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>
cssgoogle-chromehtml-tablecolgroup

Answer №1

It has been noted that chrome does not fully endorse the use of visibility:collapse for table rows and columns -- keep an eye on the issue for any updates. Our team is currently working on addressing this issue, however, it may not be implemented in stable versions until late 2017. We apologize for any inconvenience this may cause.

Answer №2

It's important to note that the CSS property visibility: collapse should be applied to the td elements, not the col. Here is a correct implementation:

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 need to hide all td elements in a specific col, you can use the td:nth-of-type(n) selector by replacing n with the index number of the column.

Answer №3

With the release of Chrome 92, users are still experiencing the same issue: when using <col style=visibility:collapse>, the column becomes invisible but still retains its width, causing the table to appear as if the column is not collapsed.

The advantage of utilizing <colgroup> + <col> is to prevent the need for adding additional markup to each <td> within the column.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move the grid items to their new positions with animation

I have a group of floating elements, all the same size and arranged within a grid layout. I am now adding a new element using jQuery's .after() method, which is larger in size and spans the entire width of the container, necessitating its own row. T ...

jquerycssinsertgrid-layout

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...

javascripthtmlcssvue.js

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...

javascriptcssnode.jsangularpostgresql

Tips for organizing an object according to specific attributes

Within my table, I have implemented a feature that allows the display of only selected columns at a time. To achieve this, I store the chosen columns (table headings) in an array called selectedTableHeaders. The next step is to filter out a new array bas ...

javascriptvue.jsecmascript-6html-table

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

phphtmlmysqlcss

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

cssvue.jsfilterfigmamix-blend-mode

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

On my website, I have a <p> tag and I am interested in knowing which JavaScript function is responsible for adding text inside this element. Is there a special method in Chrome to add a listener on this tag and pinpoint the script that writes to it ...

javascriptgoogle-chrome

Implement the addition of a class upon hovering using AngularJS

My goal is to include a new class when hovering over the li element using Angular in the code snippet below. <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> ...

javascriptcssangularjs

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...

javascriptjqueryhtmlcss

``Is there a faux pseudo element lurking within Firefox?"

I have a question regarding Firefox. I often notice some peculiar pseudo elements in the debugger tool, displayed as a rectangle with a dot inside: In this particular case, I cannot fathom why there would be a pseudo element in the middle of a list. Whe ...

htmlcssfirefoxpseudo-element

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used. if ( $(".alert-box").height() >= 90 ) { $('.img').css(&apos ...

javascriptjqueryhtmlcssjquery-plugins

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...

javascriptcssreactjsmaterial-ui

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Using Sass to create dynamic variables with other variables

Is it possible to reference variables based on the value of another variable? This functionality exists in languages like PHP. For example, in Sass: I have variables $green, $blue, and $yellow being included from a partial. I want to dynamically set the ...

csssasscompass-sass

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

javascripthtmljquerycssbootstrap-4