maneras de ocultar la primera columna de la tabla a través de CSS

Question

Este código está trabajando en los navegadores que no sean IE:

table.tbl.tr.td:first-child { display: none; } 

¿Qué voy a utilizar para hacer que funcione en todos los navegadores?

Answer 1

Desafortunadamente, las versiones anteriores de IE no admiten: primer hijo en CSS. No sé sobre IE8. De todos modos, si no desea hacer javascript y tiene acceso al html, es muy fácil asignar una "primera" clase a los primeros tds de la columna en la tabla. Por lo que el HTML se verá así:

<table> 
    <tr> 
    <td class="first">...</td> 
    <td>..</td> 
    .. 
    </tr> 
</table> 

A continuación, puede crear una entrada de css como:

table td.first { display: none; } 

Answer 2

Bueno, la respuesta corta es que no puedes hacer que esto funcione en versiones anteriores de IE. Supongo que IE8 lo manejaría. Hay un hack de CSS llamado expresiones que resolvería el problema, pero las expresiones son una mala idea, ni siquiera te mostraré cómo hacerlo.

Mantenga su CSS como está, y agregue un JavaScript que haga lo mismo para usted en DOMReady si el cliente está en IE.

Answer 3

Lamentablemente, se puede hacer muy poco. <colgroup> parece tentador, pero los navegadores lo tratan de manera diferente.
Puede que tenga que agregar manualmente una clase para cada celda, o use JavaScript.

Answer 4

Su expresión anterior no funcionará en absoluto. table.tbl.tr.td seleccionará un elemento de tabla que se define de esta manera: <table class="tbl tr td"> pero no sus celdas.

Debe ser así y la :first-child selector es compatible con casi todos los navegadores por encima de Internet Explorer 6:

table.tbl tr td:first-child { display: none; } 

Answer 5

Para IE debería/podría ser capaz de configurar col y colspans de las columnas de tabla a continuación, ocultar aquellos en CSS.

Por lo que sé, esto solo funcionará en IE, que (por una vez, para su crédito) tiene la mejor implementación de col y colspan. Otros navegadores son débiles aquí (pero es una parte muy pequeña de la especificación)

Answer 6

Ocultar primera columna

table td:nth-child(1){ display:none;} 

funciona bien en Chrome + Firefox, pero no en IE

usar jQuery para manejar multiplataforma problemas usando:

$('table td:nth-child(1)').hide(); 

funciona en todos los navegadores!

Answer 7

Utilice simplemente:

table td:nth-child(n){ 
    display:none; 
} 

Donde n es la columna que desea ocultar.

Aquí se muestra un ejemplo de uso:

table.marks.hideSubject  {td:nth-child(1) {display: none;}} 
table.marks.hideDescription {td:nth-child(2) {display: none;}} 
table.marks.hideMark   {td:nth-child(3) {display: none;}} 
table.marks.hideRank   {td:nth-child(4) {display: none;}} 

Answer 8

Mediante el uso de CSS nth-child podemos ocultar las columnas. Solo necesita especificar el TABLE ID y los índices de columna.
En este ejemplo, estoy ocultando las últimas 3 columnas de la tabla.

<style> 
    #ID_OF_THE_TABLE tr *:nth-child(10),tr *:nth-child(9),tr *:nth-child(8){ 
     display: none; 
    } 
</style> 

Answer 9

las soluciones, que trabajaron para mí, fue:

td { display: none; } 
td + td { display: table-cell; } 

No hay necesidad de JavaScript, no hay necesidad de una clase extra.

Cheers