Is it possible to hide / show table columns by changing the CSS class on the col element only?

Question

I'm trying to hide / show columns in a table based on users choices during runtime. I defined two CSS classes:

.hide { visibility: collapse; }

.show { visibility: visible; }

I tried to set these styles on the <col> element corresponding to the column I want to hide / show:

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

However, it only seems to work in Firefox but not in Safari or Chrome. Does Safari and Chrome require special handling? I try to avoid looping through all the rows and modifying the CSS class / style on each corresponding <td>, and the number of columns in the table is large, so I would like to avoid creating one CSS class per column as well. Is there any reliable way to hide / show columns across browsers just by changing the CSS class on <col>?

Answer 1

Well Chrome is not really a widely supported browser so technically no one cares if it doesn't work in Chrome (not yet anyway). But why not set visibility to hidden?

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