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