Tabla css con imágenes

¡Hola!

Por lo que veo en las capturas todo apunta que las tablas tienen un tamaño fijo y estático, es por este motivo que al cambiar de resolución no te permite visualizarlo correctamente.

Te recomiendo que en vez de tablas utilices capas (divs) con tamaños relativos con porcentajes. De esta manera, encajará y será responsive para todas las resoluciones.

Ten en cuenta que no damos soporte a programación personalizada por lo que la información que podemos darte es general.

¿Podrías enviarnos un enlace donde tienes hecha la tabla?

Saludos

Hola Rafael,
la url es la url que he adjuntado anteriormente /altres-centres o sea Contenido solo visible a usuarios registrados
Ya se que no teneis programación personalizada simplemente os pido algún trozo de código css que me pueda faltar para solucionar el problema, seria diferente que os pidiera que me hicierais vosotros la tabla con html y el css que esta utilizara.
Por norma con Jhon y Pablo nunca he tenido ningún problema y siempre me han ayudado con pequeños fragmentos de código que los más inexpertos nos dejamos.

Saludos

Hola

Creo que has planteado mal el diseño de esta parte de tu sitio, cuando quiere un comportamiento responsive para una tabla usualmente es para mostrar información tabulada, la tabla no puede adaptarse al espacio del navegador sin embargo lo que se suele hacer es poner un scroll para la tabla, por ejemplo :

https://www.webempresa.com/blog/item/1431-haz-que-tus-tablas-en-joomla-se-adapten-bien-a-los-dispositivos-moviles.html

Tal como te dije esto es usualmente usado cuando tienes información de filas columnas tipo excel

En tu caso es más un tema visual, que quieres poner links de imagen texto y que se ordenen en columnas y filas, no necesitas una tabla para esto, tendrías que evaluar hacerlo con Divs flotantes, por ejemplo:

http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

Veo que tu plantilla carga un archivo css de bootstrap podrías evaluar hacerlo con el sistema de grids de bootstrap :

http://getbootstrap.com/examples/grid/

Saludos.

Hola Jhon,
muchas grácias por tus aclaraciones.

Saludos

Hola vuelvo a reemprender el hilo, disculpen.
Me podrian indicar como reducir el espaciado entre columnas en la tabla que les muestro?
Hemos estado probando y no damos con el código adecuado, nos pueden dar una ayuda?

Muchas gracias de antemano

Saludos

Hola,

Este espacio se aplica porque la tabla está contenido en un div que tiene un ancho de 800 píxels aplicado mediante CSS. De esta forma cada celda de la tabla ocupa una tercera parte de ese ancho.

Este ancho de 800 píxels lo estás aplicado desde el archivo templates/yoo_master2/css/custom.css con el siguiente código:

#contenedor
{
  margin: 10px auto;
  height: 550px;
  width: 800px;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 10px;
  position: relative;
}

Tal como te había comentado Rafael en una respuesta anterior, no te recomiendo utilizar una tabla si quieres conseguir un comportamiento responsive. Es mejor usar etiquetas div. Sería algo como lo siguiente:

Contenido de la celda
Contenido de la celda
Contenido de la celda
....

Luego tendrías que añadir un CSS como el siguiente:

.celdatabla {
width: 100px;
float: left;
}

Podrías ajustar el ancho de la celda a tu gusto. También es posible que sean necesarios más retoques a nivel de CSS.

Hola Pablo,
muchas gracias por tus lecciones 😉 aparte de lo que comentas he añadido un div general para todos los divs "celdatabla" puesto que tengo también los círculos de abajo la tabla que queria hacer con divs y esto me generaba alguna complicación en la visualización correcta también le he puesto un overflow: hidden; ya que se solapaban los divs.

Lo único que no se como hacer (he estado probando una y otra cosa y nada) para que no se muestren en una sola columna todos los pictogramas si no que se queden por ejemplo con tres columnas 4 filas y 2 pictos sueltos (por poner un ejemplo), os adjunto una captura.

Por otra parte como podríamos visualizar correctamente alineados todos los pictogramas? También les adjunto una captura.

De nuevo muchas gracias 😉

Saludos

Hola

Lo veo correctamente, el problema solo es al redimensionarse el navegador, para esto lo que puedes hacer es darle un min-height, por ejemplo, con esto se verá mejor conservando las filas y columnas.

.celdatabla {
min-height:140px;
}

Saludos.

Muchas gracias Jhon, ahora mucho más perfecto! 😉

Saludos