Alinear columnas debajo de la primera

[sylarlocke]

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

[Rafael]

Creo que tu lógica en el caso no es la correcta. Una tabla no se va a comportar así.

Haz simplemente tres tablas de una columna daca una y para que coincidan pon un alto fijo a las celdas.

Tal vez se pudea explotar la tabla usando cosas como nth-child, pero yo lo haría con las 3 tablas.

[sylarlocke]

Gracias por su respuesta Rafa,

Si la verdad es que no es el comportamiento correcto de una tabla, pero digamos que pensaba que existiría alguna forma a traves de css3 de tal forma que pudiese controlar los "td" y "tr" al gusto.

Al final casi veo mejor opción poner div, es una pena por que tenía ya toda la estructura montada.

Saludos