Ver Mensaje Individual
  #4 (permalink)  
Antiguo 22/08/2014, 01:51
juangemelo01
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 11 meses
Puntos: 17
Respuesta: ocultar columnas de una tabla

Cita:
Iniciado por weltxo Ver Mensaje
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

Última edición por juangemelo01; 22/08/2014 a las 02:01