表：“visibility:collapse”不适用于“border-collapse”答案

【问题标题】：Table: "visibility:collapse" does not work with "border-collapse"表：“visibility:collapse”不适用于“border-collapse”
【发布时间】：2018-01-29 19:13:15
【问题描述】：

我正在尝试使用<col> 和visibility:collapse 隐藏表中的列，如下所述： Is it possible to hide / show table columns by changing the CSS class on the col element only?

现在我发现这个解决方案似乎只适用于“普通”表，但不适用于 border-collapse:collapse。在这种情况下，只有该列的内容被隐藏，后续列的内容向左移动。

请看这里： http://jsfiddle.net/seeLcc2p/3/

body {
  padding: 5px;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  /*   border-collapse:separate; */
}

.hide {
  visibility: collapse;
}

<head>
  <style>
      /* css code */
  </style>
</head>

<body>
  <table border="1">
    <col width="100" />
    <col width="50" class="hide" />
    <col width="100" />
    <col width="100" />
    <tr>
      <td>Row 1 Col 1</td>
      <td>Row 1 Col 2</td>
      <td>Row 1 Col 3</td>
      <td>Row 1 Col 4</td>
    </tr>
    <tr>
      <td>Row 2 Col 1</td>
      <td>Row 2 Col 2</td>
      <td>Row 2 Col 3</td>
      <td>Row 2 Col 4</td>
    </tr>
    <tr>
      <td>Row 3 Col 1</td>
      <td>Row 3 Col 2</td>
      <td>Row 3 Col 3</td>
      <td>Row 3 Col 4</td>
    </tr>
  </table>
</body>

当拥有border-collapse:separate; 时，一切都被排除在外，而使用border-collapse:collapse; 时，布局被破坏了......

任何想法如何解决这个问题或我做错了什么？
在 Firefox 57.0.4 中尝试过。

【问题讨论】：

看起来像一个 Firefox 错误。请注意，Chrome 根本不支持可见性：在列上折叠。我建议你检查 Edge，如果它看起来像你期望的那样，然后针对 Firefox 提交一个错误。

标签： html css html-table css-selectors

【解决方案1】：

不要使用可见性：折叠，尝试可见性：隐藏它应该可以解决问题

【讨论】：

这些是不同的。 visibility:hidden 将在该列原来的位置留下一个空白区域，而 visibility:collapse 不会。