Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] tablas y selectores en CSS responsive

Estas en el tema de tablas y selectores en CSS responsive en el foro de HTML en Foros del Web. amigos, aunque asiduo al foro de MysQL, soy nuevo en este foro y os envío un saludo a todos. Estoy aprendiendo HTML y CSS, aunque ...
  #1 (permalink)  
Antiguo 12/05/2013, 03:31
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Cáceres
Mensajes: 3.735
Antigüedad: 16 años, 1 mes
Puntos: 300
tablas y selectores en CSS responsive

amigos,
aunque asiduo al foro de MysQL, soy nuevo en este foro y os envío un saludo a todos. Estoy aprendiendo HTML y CSS, aunque ya tengo algunos conocimientos básicos. Mi pregunta seguramente esté ya respondida en el foro, pero no he logrado localizar la respuesta. Si es así, pido disculpas, y os ruego que me remitáis a algún post concreto.
Lo que deseo saber es cuáles son las recomendaciones a la hora de controlar el tamaño de tablas y selectores dentro de una web responsiva de acuerdo con el tamaño del soporte o mejor dicho, del tamaño de la pantalla en el navegador. No sé si debo resolver el tema estableciendo para cada soporte o grupo de soportes (tamaños de pantallas) unas anchuras y tamaños específicos en las tablas, y si también puedo controlar eso bien en los select y sus option, por ej., uno cuya línea de una de las opciones contiene una frase con bastantes caracteres. A veces hay tablas que no caben en el tamaño de un móvil o de la pantalla correspondiente (sea horizontal, portrait, o vertical, landscape). ¿Qué recomendáis para esos casos? Escribir tablas específicas para esos soportes. Entiendo que las tablas son necesarias no para la estructura web (se recomienda para ello tableless), pero sí para la presentación de datos en formato tabular. Como puede armonizarse eso, sobre todo pensando en la pantalla de un móvil en orientación portrait. Me gustaría oír algunas sugerencias procedentes de vuestra experiencia con diseño web responsive. No sé si para los select y sus option recomendáis usar listas con enlaces o alguna otra solución que permita mayor control y redimensionamiento, aunque imagino que se perderán funciones.
Gracias

Última edición por jurena; 12/05/2013 a las 12:29
  #2 (permalink)  
Antiguo 12/05/2013, 03:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: tablas y selectores en CSS responsive

Cita:
Iniciado por jurena Ver Mensaje
amigos,
soy nuevo en este foro.
Bienvenido al foro (?).

Hay varias opciones. Aunque lo más cool es hacer cosas como puedes ver en el blog de Chris Coyier.

Cosas más simples, aprovechando que las pantallas pequeñas suelen ser táctiles en las que no aparecen las barras de desplazamiento, también pueden hacerse. Algo muy básico sería hacer algo así:

Código HTML:
Ver original
  1. <div class="contenedor_tabla">
  2.   <table></table>
  3. </div>

Código CSS:
Ver original
  1. .contenedor_tabla {
  2.   width: 100%;
  3.   overflow-y: auto;
  4. }

Con esto haces que en el momento que la tabla sea más grande que su contenedor quede oculta pero aún pueda accederse haciendo scroll —deslizando el dedo en caso de pantallas táctiles— hacia los lados. Un ejemplo: http://www.maxdesign.com.au/jobs/exa...ble/index1.htm (obviamente hay que hacer el ancho del navegador más pequeño)

Siempre depende un poco de tu caso particular, pero por ahí van los tiros.
  #3 (permalink)  
Antiguo 12/05/2013, 04:02
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Cáceres
Mensajes: 3.735
Antigüedad: 16 años, 1 mes
Puntos: 300
Respuesta: tablas y selectores en CSS responsive

Gracias por la bienvenida, pzin, y gracias por los dos consejos. Empezaré usando el sistema sencillo y veré esas otras medidas cool, las del blog de Chris Coyier.

No sé si para el caso de los selectores de formulario las soluciones van encaminadas en la misma dirección o existen otras alternativas.
Me respondo yo con este enlace:
http://css-tricks.com/responsive-menu-concepts/


Te estoy muy agradecido por todo. Ha sido un placer y volveré por aquí, seguro, ahora que estoy con esto de las CSS.

Última edición por jurena; 12/05/2013 a las 04:14

Etiquetas: css, html5, responsive, tablas
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 04:24.