Hola buenas,
Estoy intentando tener tres columnas de una tabla, cada una de ellas se vaya colocando debajo de la anterior, conforme se vaya haciendo la resolución de la pantalla más pequeña, pero no consigo el resultado deseado, os explico:
Tengo tres columnas, con 8 filas, cada uno de estos tres "tr" tienen tres "td" que corresponden con cada columna.
Bien lo que quiero que haga exactamente es que la primera columna se quede siempre fija, digamos de un determinado tamaño, la segunda se coloque justo al final del último td de la primera y conforme se va haciendo la pantalla más pequeña la tercera columna se coloque en el último td de la segunda.
El problema es que siempre se va el primer td de la segunda columna debajo del primer td de la primera columna, yo quiero que se vaya justo al final del último td de la primera columna.
Pongo un ejemplo:
Código:
<table>
<tr>
<tr>
<th>Encabezado 1ª Columna</th>
<th>Encabezado 2ª Columna</th>
<th>Encabezado 3ª Columna</th>
</tr>
<tr>
<td>Contenido 1ª fila 1ª Columna</td>
<td>Contenido 1ª fila 2ª Columna</td>
<td>Contenido 1ª fila 3ª Columna</td>
</tr>
<tr>
<td>Contenido 2ª fila 1ª Columna</td>
<td>Contenido 2ª fila 2ª Columna</td>
<td>Contenido 2ª fila 3ª Columna</td>
</tr>
<tr>
<td>Contenido 3ª fila 1ª Columna</td>
<td>Contenido 3ª fila 2ª Columna</td>
<td>Contenido 3ª fila 3ª Columna</td>
</tr>
</table>
He probado un poco de todo pero no he conseguido el efecto deseado, creando clases para cada columna, position, float, display y nada siempre se iba debajo o desaparecia.
Os agradezco vuestra ayuda.
Un Saludo