¿Es posible ocultar/mostrar columnas de tabla cambiando solo la clase CSS en el elemento col?

Question

Estoy tratando de ocultar/mostrar columnas en una tabla en función de las elecciones de los usuarios durante el tiempo de ejecución. He definido dos clases CSS:

.hide { visibility: collapse; } 

.show { visibility: visible; } 

traté de establecer estos estilos en el elemento <col> correspondientes a la columna Quiero ocultar/mostrar:

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

Sin embargo, sólo parece funcionar en Firefox pero no en Safari o Chrome. ¿Safari y Chrome requieren un manejo especial? Intento evitar recorrer todas las filas y modificar la clase/estilo de CSS en cada <td> correspondiente, y el número de columnas en la tabla es grande, por lo que también me gustaría evitar crear una clase de CSS por columna. ¿Hay alguna forma confiable de ocultar/mostrar columnas en los navegadores simplemente cambiando la clase CSS en <col>?

Answer 1

Bueno Chrome no es realmente un navegador ampliamente compatible por lo que técnicamente a nadie le importa si no funciona en Chrome (aún no de todos modos). Pero, ¿por qué no configurar la visibilidad como oculta?

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

Parece que los navegadores basados ​​en Webkit todavía no admiten col {visibility: collapse}. http://www.quirksmode.org/css/columns.html es bastante útil para verificar el soporte de la columna de la tabla.

Actualmente estoy jugando 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; 
} 

pero luego puede permitirse el lujo de no preocuparse por el IE. Solo ten cuidado de que vas a tener que modificar cualquier colspans y filas de filas. Use tr: first-child, tr: not (: first-child) etc. para seleccionar/evitar según sea necesario.

Answer 3

Creo que la mejor opción es usar colgroup en su tabla y modificar los atributos de css para mostrar u ocultar una columna o un conjunto de columnas. Por ejemplo, podría ocultar las primeras cinco columnas, como a continuación:

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

Y deberá modificar el atributo por jQuery, como a continuación:

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