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

Question

我试图在运行时根据用户选择隐藏/显示表中的列.我定义了两个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>？

Answer 1

Chrome 并不是真正受到广泛支持的浏览器，因此从技术上讲，没有人关心它是否在 Chrome 中无法运行（至少目前还不是）。但为什么不将可见性设置为隐藏呢？

td {
     width:100px;
     height:500px;
     border:solid 1px #000000;
 }
td#one {
      visibility:hidden;
     background:#ff0000;
 }
td#two {
     visibility:hidden;
     background:#00ff00;
 }
td#three {
      visibility:hidden;
     background:#0000ff;
 }