Toggle table columns with <colgroup>

Question

Just discovered the <colgroup> tag. Trying to use that to toggle columns. Works for stuff like background color, but not hiding.

http://www.w3schools.com/tags/tag_colgroup.asp

table-column is a display property too, so I was thinking, yes, great!

http://www.w3schools.com/cssref/pr_class_display.asp

Doesn't seem to be that simple though. Threads and discussions tend to dive into advanced jQuery. Why is this?

My table goes like:

<table style="vertical-align: middle;">
  <colgroup>
    <col id="c1">
    <col id="c2">
    <col id="c3">
    <col id="c4">
    <col id="c5">
  </colgroup>
      <tr id="d1">
        <td style="text-align: right; vertical-align: middle;">1/2 D note:</td>

etc.

With a toggle button:

<a href="javascript:toggleCol2();"><img src="/ico/ms.gif" class="ico" alt="X" title="toggle milli-seconds" id="col_ms">milli-seconds</a>

And this JavaScript:

var Col2 = 1;

function toggleCol2() {
    if (Col2 == 0) {
        window.document.getElementById('c2').style.display = "table-column";
        window.document.getElementById('col_ms').style.opacity = "1";
        Col2 = 1;
    } else if (Col2 == 1) {
        window.document.getElementById('c2').style.display = "none";
        window.document.getElementById('col_ms').style.opacity = "0.2";
        Col2 = 0;
    }
}

from this file: http://flamencopeko.net/bpm_calc.js

This is the test page: http://flamencopeko.net/bpm_calc_col.php

Answer 1

Use collapse value for visibility property of the col tag you need. E.g. for hiding column c2 use:

#c2 {
   visibility: collapse;
}

And also to zero out the width of the collapsed column, set the col element's width to 0 while setting the table element's table-layout css property to fixed value:

#c2 {
   visibility: collapse;
   width:0;
}

and

<table style="table-layout:fixed;...">
...