0

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

Ole Sørensen
  • 349
  • 5
  • 19

1 Answers1

0

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;...">
...
Mohsenme
  • 1,012
  • 10
  • 20
  • Yes. I did do that. This does work. The table width was not maintained. Also IE centered the resulting smaller table, whilst other browsers kept it left aligned. When it came to toggling rows there was not question for me what I was after. Now with the column toggling, I'll have to think a bit about how I want this to work / look. But I do want the functionality. Do appreciate all input, now, and also in the future. I guess I want the cells to change width to fill the table. I'll get back to this. Thanks. – Ole Sørensen Jan 20 '14 at 22:56
  • 1
    You're welcome. You can also set the width property of col elements by percent. – Mohsenme Jan 21 '14 at 08:37
  • Yes. I solution for maintaining table width would be highly welcome. – Ole Sørensen Jan 22 '14 at 19:28