是否可以通过仅更改 col 元素上的 CSS 类来隐藏/显示表格列？

我试图在运行时根据用户的选择隐藏/显示表中的列。我定义了两个 CSS 类：

.hide { visibility: collapse; }

.show { visibility: visible; }

我尝试在<col>与我想要隐藏/显示的列相对应的元素：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      ...
    </tr>
  </thead>
  <colgroup>
    <col class="hide">
    <col>
    ...
  </colgroup>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    ...
  </tbody>
</table>

然而，它似乎只适用于 Firefox，而不适用于 Safari 或 Chrome。 Safari 和 Chrome 是否需要特殊处理？我尽量避免循环遍历所有行并修改每个相应的 CSS 类/样式<td>，并且表中的列数很大，因此我想避免为每一列创建一个 CSS 类。有没有可靠的方法可以通过更改 CSS 类来跨浏览器隐藏/显示列<col>?

基于Webkit的浏览器似乎还不支持col {visibility:collapse}。http://www.quirksmode.org/css/columns.html对于检查表列支持非常有用。

我目前正在玩：

/* Skipping 1st column: labels */
table.hidecol2 th:nth-child(2),
table.hidecol2 td:nth-child(2),
table.hidecol3 th:nth-child(3),
table.hidecol3 td:nth-child(3) {
  display: none;
}

但这样我就可以不关心IE了。请注意，您必须调整任何列跨度和行跨度。使用 tr:first-child、tr:not(:first-child) 等根据需要选择/避免。