CSS Col Visibility:Collapse Does Not Work on Chrome

Alternative to visibility:collapse not working on IE and Chrome

Use

display: none

instead of
visibility: collapse

It works for me to hide the dojo tree grid summary row in IE6 & Google Chrome

CSS col visibility:collapse does not work on Chrome

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.

Chrome Visibility: Collapse

Chrome and Safari treat visibility: collapse as visibility: hidden.

This will only work in Firefox/IE.

You can change it to display: none to make sure it works the same in all browsers, however this way you will miss the general idea of the collapse value, where all the width/height of the table's elements are calculated and take into account while affecting other elements in the table:

.collapse {  display: none;}

<table>  <caption>This is a Table</caption>  <thead>    <tr>      <th>Column 1</th>      <th>Column 2</th>    </tr>  </thead>  <tbody class='collapse'>    <tr>      <td>Row 1, Cell 1</td>      <td>Row 1, Cell 2</td>    </tr>    <tr>      <td>Row 2, Cell 1</td>      <td>Row 2, Cell 2</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>TOTAL 1</td>      <td>TOTAL 2</td>    </tr>  </tfoot></table>

Visibility:collapse is rendered as visibility:hidden

It won't work as intended on all browsers, only Firefox and IE (I can't confirm IE right now). The MDN docs on visibility say:

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

You can test it with this jsFiddle: http://jsfiddle.net/meT7k/. In Chrome, the first row is rendered as visibility: hidden. In Firefox, collapse is applied correctly.

In Chrome, you get the desired results when applying display: none to the row instead. However, that will probably force a re-layout of the whole table (e.g., column widths may change after the display property is changed).

What are some good work arounds to deal with the Visiblility: Collapse bug in Mozilla Firefox?

As @Richard Deeming has pointed out, this rendering issue is related to the border-collapse: collapse; property.

If you can do without it and centering is also neglectable –
removing the border-collapse: collapse; property from your table might be a valid compromise.

function hideColumn(columns) {
  columns.forEach(function(num, i) {
    columns[i] = "#col_" + columns[i];
  });
  let selectors = columns.join(", ");
  // reset previously hidden
  let hidden = document.querySelectorAll(".collapsed-col");
  hidden.forEach(function(el) {
    el.classList.remove("collapsed-col");
  });
  // hide cells by class
  let cells = document.querySelectorAll(selectors);
  cells.forEach(function(item, i) {
    item.classList.add("collapsed-col");
  });
}

// test input
let inputHideColumns = document.querySelector(".inputHideColumns");
inputHideColumns.addEventListener("change", function(e) {
  let value = e.target.value.replaceAll(", ", ",");
  let columns = value.split(",");
  hideColumn(columns);
});

.collapsed-col {
  visibility: collapse;
}

table {
  border-spacing: 0;
  /*
  border-collapse: collapse;
  margin: auto; 
  */
  border: 1px solid black;
  table-layout: fixed;
}

th {
  border-bottom: 1px solid grey;
}

td {
  text-align: center;
}

<body>
  <div style="text-align: center;">
    <table>
      <colgroup>
        <col id="col_1">
        <col id="col_2">
        <col id="col_3">
        <col id="col_4" class="collapsed-col">
        <col id="col_5" class="collapsed-col">
        <col id="col_6">

      </colgroup>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th>Col 6</th>
      </tr>
      <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
        <td>1.6</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
        <td>2.6</td>
      </tr>
    </table>
  </div>

  <p>
    <label>hide columns (comma seperated)</label>
    <input class="input inputHideColumns" type="text" placeholder="hide columns (comma seperated)" value="5,4">
  </p>

  </div>