[SOLUCIONADO] Celdas de tabla una debajo de otra

[rodrigus71]

Hola de nuevo foro:

Estoy pasando a diseño responsive una página y estoy un poco atascado con una tabla normal y corriente similar a esta

<table>
<tr>
<td>Descripcion</td>
<td>Cantidad</td>
<td>Precio</td>
</tr>

<tr>
<td>Pantalon</td>
<td>1</td>
<td>30</td>
</tr>

<tr>
<td>Camiseta</td>
<td>3</td>
<td>16</td>
</tr>

<tr>
<td>Gorra</td>
<td>2</td>
<td>12</td>
</tr>
</table>

Lo que quiero es saber como puedo hacer con css que las celdas <td> se vean unas debajo de otras en vez de una al lado de otras, ya que cuando se llega a resoluciones pequeñas de móvil hay que hacer la letra muy pequeña para que se pueda ver todo en horizontal.

Espero haberme explicado bien

Gracias anticipadas

[xfxstudios]

si la estas pasando a responsive no deverias utilizar tablas, pasa a los divs o a otra etiqueta que te permita ordenar los elementos más facilmente en cualquier resolucion

[rodrigus71]

Es cierto que las tablas no se llevan muy bien con el diseño responsive, pero al final he encontrado un apaño que por lo menos a mi me sirve, definiendo antes los <thead> y <tbody>


table {
width: 100%;
border-collapse: collapse;
}

only screen and (max-width: 760px) {

/* Hacer que la tabla ya no se vea como una tabla */
table, thead, tbody, th, td, tr {
display: block;
}

/* Se ocultan los títulos de las columnas ( Descripción, Cantidad, Precio) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}


td {
/* hacer que los campos se comporten como filas */
border: none;
position: relative;
padding-left: 50%;
}

td:before {
/* Se le agregan los títulos */
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/* Se ponen los nuevos titulos. */
td:nth-of-type(1):before { content: "Descripcion"; }
td:nth-of-type(2):before { content: "Cantidad"; }
td:nth-of-type(3):before { content: "Precio"; }

}

[javy7v]

Te paso lo que serían dos tablas responsive para ver si te valen , a mi en su dia me sirvieron bastante:

http://codepen.io/dudleystorey/pen/Geprd

http://codepen.io/ashblue/pen/mCtuA