mostrar - ocultar columna tabla html

CSS para ocultar varias columnas en una tabla

Question

Tengo una tabla similar a la que se muestra a continuación en un sitio de SharePoint. No puedo modificar la tabla, ya que se genera dinámicamente, pero puedo agregar CSS externo para anular su estilo. Estoy obligado a mostrar solo la segunda columna y ocultar la primera, tercera y cuarta columna.

La pseudoclase para ocultar la primera columna es

table#student tr td:first-child { display: none; }

Por favor, ayúdenme con pseudo clase o cualquier otro truco para ocultar la tercera y cuarta columna.

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Answer 1

Aqui tienes.

El CSS:

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

DEMO DE TRABAJO

Answer 2

CSS3:

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Use nth-child selector nth-child para ocultar la 2da <td> de cada fila, mostrando efectivamente la 2da columna.

Answer 3

Me sorprende que nadie haya mencionado al selector general de hermanos. (Más información aquí) Si solo necesita mostrar la segunda columna, aplicaría una display: none; estilo a la primera celda y todas las celdas después de la segunda.

table#student td:first-child,
table#student td:nth-child(2) ~ td {
  display: none;
}

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Si necesita admitir IE7 e IE8 por alguna razón, puede reemplazar el selector :nth-child() con el selector de hermanos adyacente:

table#student td:first-child,
table#student td + td ~ td {
  display: none;
}

Answer 4

Puede usar el selector CSS3 : nth-child ()

td:nth-child(3), td:nth-child(4) {
  display: none
}

jsfiddle aquí

Answer 5

.hideFullColumn tr > .hidecol
{
    display:none;
}

Puede usar .hideFullColumn en la tabla y usar .hidecol en la etiqueta que desea ocultar. No necesita preocuparse por td ya que estos se ocultarán automáticamente.

La pseudo clase está bien, pero si tiene 50 columnas y tiene que ocultar 20, entonces tendría que repetir "td: nth-child (1), td: nth-child (2), ...." 20 veces manteniendo el índice en mente. Pero en este caso puede agregar la clase .hidecol en la creación th, por lo que no necesita revisar el índice.

Puedes probar esto y, por favor, avísame si funciona.