Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Celdas de tabla una debajo de otra

Estas en el tema de Celdas de tabla una debajo de otra en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/10/2015, 13:21
Avatar de rodrigus71  
Fecha de Ingreso: mayo-2012
Ubicación: Alicante
Mensajes: 73
Antigüedad: 10 años, 3 meses
Puntos: 3
Celdas de tabla una debajo de otra

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
__________________
Dame hueco, que habiendo hueco yo ya...
https://www.ofidecoeducativos.es/
  #2 (permalink)  
Antiguo 02/10/2015, 18:19
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 7 años, 1 mes
Puntos: 263
Respuesta: Celdas de tabla una debajo de otra

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
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 04/10/2015, 08:17
Avatar de rodrigus71  
Fecha de Ingreso: mayo-2012
Ubicación: Alicante
Mensajes: 73
Antigüedad: 10 años, 3 meses
Puntos: 3
Respuesta: Celdas de tabla una debajo de otra

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"; }

}
__________________
Dame hueco, que habiendo hueco yo ya...
https://www.ofidecoeducativos.es/
  #4 (permalink)  
Antiguo 05/10/2015, 10:00
 
Fecha de Ingreso: abril-2015
Mensajes: 189
Antigüedad: 7 años, 4 meses
Puntos: 14
Respuesta: Celdas de tabla una debajo de otra

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

Etiquetas: celdas, debajo, responsive, tabla, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:40.