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


        

Answer 1

Webkit based browsers don't seem to support col { visibility: collapse } yet. http://www.quirksmode.org/css/columns.html is quite useful for checking on table column support.

I'm currently playing with:

/* Skipping 1st column: labels */
table.hidecol2 th:nth-child(2),
table.hidecol2 td:nth-child(2),
table.hidecol3 th:nth-child(3),
table.hidecol3 td:nth-child(3) {
  display: none;
}

but then I can afford to not care about IE. Just beware that you're gonna have to tweak for any colspans and rowspans. Use tr:first-child, tr:not(:first-child) etc. etc. to select / avoid as needed.

Answer 2

I think the better choice is to use colgroup on your table and modify the css attributes to show or hide a column or a set of columns. For example, you would hide the first five columns like below:

   <table>
        <colgroup>
            <col id="filterTableColgroup" span="5">
        </colgroup>
        <thead>
        <tr>
            <th>...</th>
        </tr> ...

And you would modify the attribute by JQuery like below:

    $("#filterTableColgroup").css('visibility', 'collapse');

Answer 3

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