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.