Buenas,
No acabo de entender lo que necesitas exactamente, ¿Puedes pasar algún ejemplo o imagen?
Seguramente a los ejemplos que te refieras, aunque visualmente parezca una tabla estará hechos con <div> y no con <table>
Si no a veces se hace crear dos visulizaciones diferentes y una se muestra en mobil y otra en escritorio.
Igualmente pasa ejemplo por si podemos ofrecerte una ayuda más específica.
Iniciador del debate
ruvilar
(@ruvilar)
Hola Adrian,
muchísimas gracias por responder de antemano.
Mira te cuento, ejemplos a lo que me refiero hay en todos lados, pero solo los he visto con los encabezados en la parte superior de la tabla en versión Escritorio. Aquí lo que quiero es que los encabezados permanezcan siempre a la izquierda en cualquier versión, tanto Escritorio como Móvil.
En este caso, por más que yo cree las celdas tanto con Div como con Table, el ejemplo final será el mismo para desarrollar este ejemplo. Yo prefiero Table para darle semántica a la web.
Un ejemplo claro es la tabla comparativa que hay en la siguiente URL: comprarmisprismaticos. com
… si haces un poco de scroll, verás que la tabla muestra los encabezados a la izquierda en versión Escritorio.
Te invito a que compruebes cuando reduces la ventana del navegador y ver cuando pasas a versión Móvil, como se restan las celdas de la derecha y pasan a estar una debajo de la otra, manteniendo el encabezado siempre a la izquierda, dicho encabezado se repite una y otra vez debajo del siguiente producto conforme cuantas columnas tenga la tabla.
La idea es que los detalles de cada producto se puedan visualizar en vertical siempre.
Esta clase de tablas adaptativas son buenas para tablas pequeñas como las que hay en ese ejemplo y por el cual quiero crearla, porque hasta ahora solo tengo que usar el tipico Overflow-x: auto y Display: block para que la tabla se pueda visualizar en su totalidad hacia la derecha, lo cual ya no queda tan bien como antes.
Eso es todo. Si tienes una respuesta a esto, te lo agradeceré.
Un saludo!
@ruvilar me remito a lo que te ha contestado @adriandegrafreak
Seguramente a los ejemplos que te refieras, aunque visualmente parezca una tabla estará hechos con <div> y no con <table>
Mira el código fuente y lo comprobarás.
Iniciador del debate
ruvilar
(@ruvilar)
Hola, si están hechos con Div las tablas de esa página que te mencioné, por lo que veo que con Table no hay manera de llevarlo a cabo porque se anidan todos los encabezados por una lado con Thead y todo el resto de celdas con Tbody, de manera que los encabezados en versión Escritorio siempre se verán arriba y no a la izquierda.
Por lo tanto, quiero saber en este caso con Div, como se lleva a cabo esta reducción de columnas a la derecha manteniendo en cualquier versión el encabezado a la izquierda.
Un saludo!
A ver, el truco que usan en esa web son dos tablas con cajas divs, una para desktop y otra para móviles. Desde la hoja de estilos CSS simplemente ocultas una o la otra según el dispositivo que se trate.
Iniciador del debate
ruvilar
(@ruvilar)
Okay gracias por responder, voy a intentar improvisar variantes. Saludos!
Hola @ruvilar
Pudiste resolver el problema con las soluciones que te dimos?
Por favor deja tus comentarios y marca el hilo como resuelto para ayudarnos a mantener el foro al día.
Iniciador del debate
ruvilar
(@ruvilar)
Hola, si ya está todo resuelto. Un saludo y gracias!
