[SOLUCIONADO] ocultar columnas de una tabla

[weltxo]

Hola amigos, mi pregunta es la siguiente:
tengo una tabla con 11 columnas que se visualiza perfectamente desde el navegador de la computadora. El problema viene cuándo lo hago desde el navegador de un smartphone, ya que por razones obvias son demasiadas columnas para una pantalla tan pequeña.

Quería que me ayudasen a conseguir cómo ocultar varias columnas de una tabla cuándo el tamaño máximo de la pantalla sea X píxeles (por ejemplo, 412px)

@media (max-width:412px) { .mitabla td { visibility:hidden; } } ????

Sugerencias?

[juangemelo01]

en vez de usar visibility, deberias usar
Display:none;
esto, por la razon que de que visibility ocupa la posicion del elemento invisible, sin embargo, el display none, no lo ocupa

utilizare el siguiente ejemplo por si no es claro

visibility:hidden = Hombre invisible

Display:None = Fantasma

El hombre invisible no puede traspasar las paredes, ademas que lo pueden golpear aun que no lo vean

un Fantasma si se hace invisible, tambien puede ser intangible, lo cual le permite atravezar paredes, y si lo intentan golpear, con la misma intangibilidad no pueden.

ahora bien, podrias intentar usar pseudo clases hijo o asignarle un ID a las columnas que no deseas mostrar, ( columna " | ") ( Fila " - "), y de la misma naera, jugar con los media queries para ocultarlo ;)

[weltxo]

Iniciado por juangemelo01

en vez de usar visibility, deberias usar
Display:none;
esto, por la razon que de que visibility ocupa la posicion del elemento invisible, sin embargo, el display none, no lo ocupa

utilizare el siguiente ejemplo por si no es claro

visibility:hidden = Hombre invisible

Display:None = Fantasma

El hombre invisible no puede traspasar las paredes, ademas que lo pueden golpear aun que no lo vean

un Fantasma si se hace invisible, tambien puede ser intangible, lo cual le permite atravezar paredes, y si lo intentan golpear, con la misma intangibilidad no pueden.

ahora bien, podrias intentar usar pseudo clases hijo o asignarle un ID a las columnas que no deseas mostrar, ( columna " | ") ( Fila " - "), y de la misma naera, jugar con los media queries para ocultarlo ;)

pero mi duda surge en cómo aplico la directiva display? definir una class para cada una de las celda de la misma columna?

supongamos que tengo la siguiente tabla

********* c.1 c.2 c.3 c.4 c.5
row.1 -- 1.1 1.2 1.3 1.4 1.5
row.2 -- 2.1 2.2 2.3 2.4 2.5
row.3 -- 3.1 3.2 3.3 3.4 3.5
row.4 -- 4.1 4.2 4.3 4.4 4.5

quiero ocultar las columnas 4 y 5 cuando @media{max-width:420px}

tendría que definir una clase para cada celda de las columnas 4 y 5? no se podría mejorar?
Gracias de antemano

[juangemelo01]

Iniciado por weltxo

pero mi duda surge en cómo aplico la directiva display? definir una class para cada una de las celda de la misma columna?

supongamos que tengo la siguiente tabla

********* c.1 c.2 c.3 c.4 c.5
row.1 -- 1.1 1.2 1.3 1.4 1.5
row.2 -- 2.1 2.2 2.3 2.4 2.5
row.3 -- 3.1 3.2 3.3 3.4 3.5
row.4 -- 4.1 4.2 4.3 4.4 4.5

quiero ocultar las columnas 4 y 5 cuando @media{max-width:420px}

tendría que definir una clase para cada celda de las columnas 4 y 5? no se podría mejorar?
Gracias de antemano

te dejo un ejemplo

Código HTML:

<h1>Listado de cursos</h1>
 
<table>
<tr>
  <th><strong>Curso</strong></th>
  <th><strong>Dias</strong></th>
  <th><strong>Horario</strong></th>
  <th><strong>aula</strong></th>
  <th><strong>Profesor</strong></th>
</tr>
 
<tr>
  <td>CSS</td>
  <td>Lunes-Viernes</td>
  <td>16:00 - 20:00</td>
  <td>Aula 1C</td>
  <td>Juangemelo01</td>
</tr>
 
<tr>
  <td>HTML</td>
  <td>Martes y Jueves</td>
  <td>16:00 - 20:00</td>
  <td>Aula 1B</td>
  <td>Mariana E.</td>
</tr>
 
<tr>
  <td>Javascript</td>
  <td>Lunes-Miercoles-Viernes</td>
  <td>16:00 - 20:00</td>
  <td>Aula 1A</td>
  <td>Juan Carlos</td>
</tr>
  
  <tr>
  <td>PHP</td>
  <td>Lunes-Viernes</td>
  <td>16:00 - 20:00</td>
  <td>Aula 2A</td>
  <td>Ana Karime</td>
</tr>
  
   <tr>
  <td>Jquery</td>
  <td>Lunes-Viernes</td>
  <td>16:00 - 20:00</td>
  <td>Aula 2C</td>
  <td>Jorge Abdul</td>
</tr>
  
 <tr>
  <td>Ajax</td>
  <td>Lunes-Viernes</td>
  <td>16:00 - 20:00</td>
  <td>Aula 2B</td>
  <td>Eugenia R.</td>
</tr>
</table> 

Código:

table{
  border:3px dashed goldenrod;  
}
/*Vamos a ocultar la segunda columna*/
table tr td:nth-child(2), table tr th:nth-child(2){
  border:1px dashed darkgreen;
  /*Quita esta linea y mira que pasa :)*/display:none;
}
/*Vamos a ocultar la ultima columna*/
table tr td:last-child, table tr th:last-child{
  border:1px dashed darkblue;
  /*Quita esta linea y mira que pasa :)*/display:none;
}

aqui puedes ver el resultado
http://codepen.io/elestudiantefantasma/pen/wBDbC

si tienes alguna duda, pregunta

[weltxo]

Perfecto, el resultado que quería lo he conseguido. Gracias a todos por vuestra ayuda.