Kann man Tabellenspalten verbergen/anzeigen, indem man die CSS-Klasse nur für das col-Element ändert?

Question

Ich versuche, Spalten in einer Tabelle basierend auf Benutzeroptionen während der Laufzeit zu verbergen/anzuzeigen. I definiert zwei CSS-Klassen:

.hide { visibility: collapse; } 

.show { visibility: visible; } 

ich diese Stile auf dem <col> Element zu setzen versucht, entsprechend der Spalte I verstecken wollen/show:

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

Allerdings scheint es nur in Firefox zu arbeiten aber nicht in Safari oder Chrome. Erfordern Safari und Chrome eine spezielle Handhabung? Ich versuche zu vermeiden, alle Zeilen durchzulaufen und die CSS-Klasse/Stil auf jedem entsprechenden <td> zu ändern, und die Anzahl der Spalten in der Tabelle ist groß, also möchte ich auch vermeiden, eine CSS-Klasse pro Spalte zu erstellen. Gibt es eine zuverlässige Möglichkeit, Spalten zwischen Browsern zu verstecken/anzuzeigen, indem einfach die CSS-Klasse unter <col> geändert wird?

Answer 1

Gut Chrome ist nicht wirklich ein weithin unterstützter Browser, also interessiert es technisch niemanden, wenn es in Chrome nicht funktioniert (noch nicht sowieso). Aber warum nicht die Sichtbarkeit auf versteckt setzen?

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

Webkit-basierte Browser scheinen col {visibility: collapse} noch nicht zu unterstützen. http://www.quirksmode.org/css/columns.html ist sehr nützlich für die Überprüfung der Tabellenspalte Unterstützung.

Ich spiele zur Zeit mit:

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

aber dann kann ich nicht leisten, um IE zu kümmern. Passen Sie nur auf, dass Sie für irgendwelche colspans und rowspans zwicken müssen. Verwenden Sie tr: first-child, tr: nicht (: first-child) usw. usw., um nach Bedarf auszuwählen/zu vermeiden.

Answer 3

Ich denke, die bessere Wahl ist, colgroup auf Ihrer Tabelle zu verwenden und die CSS-Attribute zu ändern, um eine Spalte oder eine Reihe von Spalten ein- oder auszublenden. Zum Beispiel würden Sie die ersten fünf Spalten wie unten verstecken:

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

Und Sie würden das Attribut von JQuery wie unten ändern:

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