È possibile nascondere/mostrare le colonne della tabella cambiando la classe CSS solo sull'elemento col?

Question

Sto cercando di nascondere/mostrare le colonne in una tabella in base alle scelte degli utenti durante il runtime. Ho definito due classi CSS:

.hide { visibility: collapse; } 

.show { visibility: visible; } 

ho cercato di impostare questi stili sull'elemento <col> corrispondenti alla colonna voglio nascondere/mostrare:

<table> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     ... 
    </tr> 
    </thead> 
    <colgroup> 
    <col class="hide"> 
    <col> 
    ... 
    </colgroup> 
    <tbody> 
    <tr> 
     <td>Row 1 Column 1</td> 
     <td>Row 1 Column 2</td> 
    </tr> 
    ... 
    </tbody> 
</table> 

Tuttavia, sembra solo a lavorare in Firefox ma non in Safari o Chrome. Safari e Chrome richiedono una gestione speciale? Cerco di evitare il looping di tutte le righe e di modificare la classe/lo stile CSS su ogni <td> corrispondente e il numero di colonne nella tabella è elevato, quindi vorrei evitare di creare anche una classe CSS per colonna. C'è un modo affidabile per nascondere/mostrare le colonne attraverso i browser semplicemente cambiando la classe CSS su <col>?

Answer 1

Bene Chrome non è un browser ampiamente supportato, quindi tecnicamente a nessuno importa se non funziona in Chrome (non ancora comunque). Ma perché non impostare la visibilità su nascosto?

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

Answer 2

I browser basati su Webkit non sembrano ancora supportare col {visibility: collapse}. http://www.quirksmode.org/css/columns.html è abbastanza utile per verificare il supporto della colonna della tabella.

Attualmente sto giocando con:

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

ma poi posso permettermi di non si preoccupano di IE. Stai attento a che devi aggiustare per qualsiasi colspan e padiglione. Usa tr: first-child, tr: not (: first-child) ecc. Ecc. Per selezionare/evitare secondo necessità.

Answer 3

Penso che la scelta migliore sia usare colgroup sulla tabella e modificare gli attributi css per mostrare o nascondere una colonna o un insieme di colonne. Ad esempio, si potrebbe nascondere le prime cinque colonne come di seguito:

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

E si potrebbe modificare l'attributo da JQuery come di seguito:

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