title: Toggle table columns with <colgroup>
body: <p>Just discovered the <code>&lt;colgroup&gt;</code> tag. Trying to use that to toggle columns. Works for stuff like background color, but not hiding.</p>
  
  <p><a href="http://www.w3schools.com/tags/tag_colgroup.asp" rel="nofollow">http://www.w3schools.com/tags/tag_colgroup.asp</a></p>
  
  <p>table-column is a display property too, so I was thinking, yes, great!</p>
  
  <p><a href="http://www.w3schools.com/cssref/pr_class_display.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_class_display.asp</a></p>
  
  <p>Doesn't seem to be that simple though. Threads and discussions tend to dive into advanced jQuery. Why is this?</p>
  
  <p>My table goes like: </p>
  
  <pre><code>&lt;table style="vertical-align: middle;"&gt;
    &lt;colgroup&gt;
      &lt;col id="c1"&gt;
      &lt;col id="c2"&gt;
      &lt;col id="c3"&gt;
      &lt;col id="c4"&gt;
      &lt;col id="c5"&gt;
    &lt;/colgroup&gt;
        &lt;tr id="d1"&gt;
          &lt;td style="text-align: right; vertical-align: middle;"&gt;1/2 D note:&lt;/td&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>With a toggle button: </p>
  
  <pre><code>&lt;a href="javascript:toggleCol2();"&gt;&lt;img src="/ico/ms.gif" class="ico" alt="X" title="toggle milli-seconds" id="col_ms"&gt;milli-seconds&lt;/a&gt;
  </code></pre>
  
  <p>And this JavaScript: </p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>from this file: <a href="http://flamencopeko.net/bpm_calc.js" rel="nofollow">http://flamencopeko.net/bpm_calc.js</a></p>
  
  <p>This is the test page: <a href="http://flamencopeko.net/bpm_calc_col.php" rel="nofollow">http://flamencopeko.net/bpm_calc_col.php</a></p>