有哪些解决 Mozilla Firefox 中 "Visiblility: Collapse" 错误的好方法？

Question

有哪些好的解决方法可以解决 Mozilla Firefox 中的“可见性：折叠”错误？

上下文：

评论区的朋友告诉我有一个旧的 Firefox 错误导致 “可见性：崩溃” CSS 属性表现得像 “可见性：隐藏” CSS 属性。这会导致 table 成为全尺寸，所有可见列都向左移动，额外的 space 向右移动。

随着 tables 的增大，这种不良行为更加严重。

我只是希望能够切换 table 列的可见性并使其在 Chrome、Edge 和 Firefox 上看起来相同，这导致了我的问题：有哪些好的解决 Mozilla Firefox 中的“可见性：折叠”错误的变通方法？

代码：

这里是 fiddle:

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

这是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>

Answer 1

如果我们在 Developer tools 中观察，我们会发现 colgroup 正在溢出。因此，如果我们在 table 上剪辑溢出，它会剪辑一些额外的部分。如果我们稍微增加折叠列的宽度，它就会完美地剪裁：

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>

但这并没有使内容居中。折叠 col 仍然有助于宽度。如果我们添加一个 div 包装器并设置它的宽度（table 宽度 - 折叠宽度）那么它可能会起作用：

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>

有了这个，我们使用包装器隐藏折叠的部分 div。

如果你想水平滚动 table 那么你需要为滚动添加一个包装器：

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

注意：这些只是解决方法。

Answer 2

正如 @Richard Deeming 指出的那样，此渲染问题与 border-collapse: collapse; 属性.

有关

如果你可以不用它并且居中也可以忽略不计table – 从 table 中删除 border-collapse: collapse; 属性可能是一个有效的妥协。

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>

另一种方法可能是根据他们的专栏对每个 th/td 应用 'collapsed-col' class。

这种方法需要您的 th 和 td 元素有一个专用列 class，例如 col_1、col_2 等

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>

有哪些解决 Mozilla Firefox 中 "Visiblility: Collapse" 错误的好方法？

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

html

css

firefox

有哪些好的解决方法可以解决 Mozilla Firefox 中的“可见性：折叠”错误？

上下文：

代码：