What are some good work arounds to deal with the "Visiblility: Collapse" bug in Mozilla Fi-CodePudding

The

With larger tables this undesired behavior is even more drastic.

I just want to be able to toggle the visibility of the table columns and have it look the same on Chrome, Edge, and Firefox which leads to my question: What are some good work arounds to deal with the "Visiblility: Collapse" bug in Mozilla Firefox?

Code:

Here is the fiddle:

https://jsfiddle.net/jado66/pgyLm86e/18/

Here is the code in the fiddle:

<html lang="en"> <head> <meta charset="utf-8"> <style> th{ border-bottom: 1px solid grey; } td{ text-align: center; } col{ border: 1px solid grey; width: 55px; } </style> </head> <body> <div style="text-align: center;"> <table style="margin: auto; border: 1px solid black; border-spacing: 0; border-collapse: collapse;"> <colgroup> <col id = "col_1"> <col id = "col_2"> <col id = "col_3"> <col id = "col_4" style="visibility: collapse"> <col id = "col_5" style="visibility: collapse"> <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> </table> </div> </div> </body> </html>

CodePudding user response：

If we observe in Developer tools we see that colgroup is overflowing. So if we clip overflow on table it clips some of the extra part. If we increase collapsed column width a little bit it clips perfectly:

Show code snippet

var c4, c5; function toggle() { c4.classList.toggle('collapsed'); c5.classList.toggle('collapsed'); } function init() { c4 = document.querySelector('#col_4'); c5 = c4.nextElementSibling; }

:root { --col-width: 55px; } th { border-bottom: 1px solid grey; } td { text-align: center; } col { border: 1px solid grey; width: var(--col-width); } /* clip the overflow */ table { overflow: clip; } .collapsed { visibility: collapse; /* need to increase width slightly to make it work */ /* some how addition doesn't work */ width: calc(var(--col-width) * 1.2); }

<html lang="en"> <body onload="init()"> <p>View this in Firefox browser</p> <div style="text-align: center;"> <table style="margin: 0 auto;border: 1px solid black; border-spacing: 0; border-collapse: collapse;"> <colgroup> <col id="col_1"> <col id="col_2"> <col id="col_3"> <col id="col_4" class="collapsed"> <col id="col_5" class="collapsed"> <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> </table> </div> <div style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div> <button onclick="toggle()">Toggle collapse</button> </body> </html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
But this doesn't center the contents. Collapsed col still contributes to width. If we add a div wrapper and set it's width (table width - collapsed width) then it may work:

Show code snippet

var c4, c5; function toggle() { c4.style.visibility = c5.style.visibility = window.getComputedStyle(c4).visibility === 'collapse' ? '' : 'collapse'; } function init() { c4 = document.querySelector('#col_4'); c5 = c4.nextElementSibling; resize(); //observe style change var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutationRecord) { resize(); }); }); observer.observe(c4, { attributes: true, attributeFilter: ['style'] }); } //subtract collapsed width from wrapper function resize() { var colgroup = document.querySelector('colgroup'); var actualWidth = colgroup.offsetWidth; var reducedWidth = 0; for (var i = 0, len = colgroup.childElementCount; i < len; i) { var col = colgroup.children[i]; if (window.getComputedStyle(col).visibility == 'collapse') { reducedWidth = col.offsetWidth; } } console.log(actualWidth ' reduced by ' reducedWidth); var wrapper = document.querySelector('#wrapper'); wrapper.style.width = (actualWidth - reducedWidth) 'px'; }

th { border-bottom: 1px solid grey; } td { text-align: center; } col { border-right: 1px solid grey; width: 55px; } /* added styles */ col:last-child { border-right: none; } table { width: max-content; overflow-y: hidden; } #wrapper { border: 1px solid; width: max-content; overflow: hidden; margin: 0 auto; }

<html lang="en"> <body onload="init()"> <p>View this in Firefox browser.</p> <div id=wrapper style="text-align: center;"> <table style="margin: auto; border-spacing: 0; border-collapse: collapse;"> <colgroup> <col id="col_1"> <col id="col_2"> <col id="col_3"> <col id="col_4" style="visibility: collapse"> <col id="col_5" style="visibility: collapse"> <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.4444444</td> <td>1</td> <td>1.6</td> </tr> </table> </div> <div style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div> <button onclick="toggle()">Toggle collapse</button> </body> </html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
With this we are hiding the collapsed part using wrapper div.

If you want to scroll the table horizontally then you need add one more wrapper for the scroll:

Show code snippet

<html lang="en"> <head> <meta charset="utf-8"> <script> var c4, c5; function toggle() { c4.style.visibility = c5.style.visibility = window.getComputedStyle(c4).visibility === 'collapse' ? '' : 'collapse'; } function init() { c4 = document.querySelector('#col_4'); c5 = c4.nextElementSibling; resize(); //observe style change var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutationRecord) { resize(); }); }); observer.observe(c4, { attributes: true, attributeFilter: ['style'] }); } //subtract collapsed width from wrapper function resize() { var colgroup = document.querySelector('colgroup'); var actualWidth = colgroup.offsetWidth; var reducedWidth = 0; for (var i = 0, len = colgroup.childElementCount; i < len; i) { var col = colgroup.children[i]; if (window.getComputedStyle(col).visibility == 'collapse') { reducedWidth = col.offsetWidth; } } console.log(actualWidth ' reduced by ' reducedWidth); var wrapper = document.querySelector('#wrapper'); wrapper.style.width = (actualWidth - reducedWidth) 'px'; } </script> <style> th { border-bottom: 1px solid grey; } td { text-align: center; } col { border-right: 1px solid grey; width: 55px; } /* added styles */ col:last-child { border-right: none; } table { width: max-content; overflow-y: hidden; } #wrapper { border: 1px solid; width: fit-content; overflow: hidden; margin: 0 auto; } #scrollMe { width: 300px; overflow-x: auto; margin: 0 auto; border: 1px solid lime } </style> </style> </head> <body onload="init()"> <p>View this in Firefox browser.</p> <div id="scrollMe"> <div id=wrapper style="text-align: center;"> <table style="margin: auto; border-spacing: 0; border-collapse: collapse;"> <colgroup> <col id="col_1"> <col id="col_2"> <col id="col_3"> <col id="col_4" style="visibility: collapse"> <col id="col_5" style="visibility: collapse"> <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.4444444</td> <td>1</td> <td>1.6</td> </tr> </table> </div> </div> <div style="width: min-content; background-color: wheat; margin: 0 auto;;">mid</div> <button onclick="toggle()">Toggle collapse</button> </body> </html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note: These are just workarounds.

CodePudding user response：

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.

Show code snippet

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>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

An alternative approach might be to apply a 'collapsed-col' class to every th/td according to their column.

This approach would require your th and td elements to have a dedicated column class like col_1, col_2 etc.

function indexColumns(table) { let rows = table.querySelectorAll("tr"); rows.forEach(function (row, r) { let cols = row.querySelectorAll("th, td"); cols.forEach(function (col, c) { col.classList.add("tr_" r); col.classList.add("col_" (c 1)); }); }); } 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"); }); } // index th/td elements by setting class let table = document.querySelector('table'); indexColumns(table); hideColumn([4, 5]); // test input let inputHideColumns = document.querySelector(".inputHideColumns"); inputHideColumns.addEventListener("change", function (e) { let value = e.target.value.replaceAll(", ", ","); let columns = value.split(","); hideColumn(columns); });

.layout { width: 50%; margin: 0 auto; } table { border-spacing: 0; border-collapse: collapse; margin: auto; border: 1px solid black; } th { border-bottom: 1px solid grey; } td { text-align: center; } .collapsed-col { display: none; }

<body> <div class="layout"> <div class="table-wrap"> <table> <thead> <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> </thead> <tbody> <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> </tbody> </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>
<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>