[SOLUCIONADO] tabla responsive

[jules182]

Hola a todos:
Tengo una tabla de precios y lo que quiero hacer es adaptarla para que se vea en el movil, pero se va a ver fatal no? que otra opción me recomendais?


os dejo el enlace para que veais a que tabla me refiero:

http://jotadesigner.com/trabajos/internetrural/

[pzin]

Yo te diría que pusieras la tabla en un div y luego en las media queries especificas que table tenga un ancho mínimo y con un overflow-x: scroll para el div lo que haces es que para móviles se pueda deslizar con el dedo por esa capa/tabla.

Por ejemplo, algo así:

Código CSS:

@media screen(max-width: 320px) {
 
  div#precios {
    overflow-x: hidden;
  }
 
  div#precios > table {
   min-width: 700px;
  }
 
}
 

Otra opción es ir ajustando las fuentes y hacerlas más pequeñas.

De todas formas, hay una cosa en tu sitio a la que no le veo sentido. Para cuando se vea en resoluciones pequeñas, el espacio lateral —donde se ve el fondo— deberías de eliminarlo para así aprovechar al máximo el espacio.

[jules182]

Iniciado por Bonez

Yo te diría que pusieras la tabla en un div y luego en las media queries especificas que table tenga un ancho mínimo y con un overflow-x: scroll para el div lo que haces es que para móviles se pueda deslizar con el dedo por esa capa/tabla.

Por ejemplo, algo así:

Código CSS:

@media screen(max-width: 320px) {
 
  div#precios {
    overflow-x: hidden;
  }
 
  div#precios > table {
   min-width: 700px;
  }
 
}
 

Muchas gracias! Voy a probar eso, y te digo!

[jules182]

Iniciado por Bonez

Yo te diría que pusieras la tabla en un div y luego en las media queries especificas que table tenga un ancho mínimo y con un overflow-x: scroll para el div lo que haces es que para móviles se pueda deslizar con el dedo por esa capa/tabla.

Por ejemplo, algo así:

Código CSS:

@media screen(max-width: 320px) {
 
  div#precios {
    overflow-x: hidden;
  }
 
  div#precios > table {
   min-width: 700px;
  }
 
}
 

Otra opción es ir ajustando las fuentes y hacerlas más pequeñas.

De todas formas, hay una cosa en tu sitio a la que no le veo sentido. Para cuando se vea en resoluciones pequeñas, el espacio lateral —donde se ve el fondo— deberías de eliminarlo para así aprovechar al máximo el espacio.

he puesto esto:

Código:

div.p_table{
    overflow-x: hidden;
	min-width: 300px;
}

y se ve bastante mal, voy a probar a cambiarle el tamaño a la fuente!

[pzin]

El min-width se lo tienes que aplicar a la tabla, no a la capa.

La idea es que la tabla sea más grande que la capa, pero que esta capa oculte la parte que sobresale de la tabla, y con la propiedad scroll, lograr que el usuario pueda deslizar el dedo sobre la capa y se vaya mostrando el resto de la tabla.

[webosiris]

aquí tienes algunos ejemplos de tablas adaptativas:
http://elvery.net/demo/responsive-tables/
http://css-tricks.com/responsive-data-tables/
http://www.zurb.com/playground/responsive-tables

por cierto, los arriba mencionados son los resultados 1,2 y 3 en google.