tabla responsive

[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!