Soporte » Guías – Resolución de problemas » Tabla Responsive con encabezados a la izquierda

  • Hola, una consulta, como se puede crear una tabla responsive que tenga sus encabezados siempre a la izquierda tanto en modo Escritorio como en modo Móvil.

    En resumen, si tengo 4 columnas, 1 que se muestre el encabezado y las 3 restantes los detalles, cuando pase a móvil quiero pero se vayan restando las columnas de la derecha de modo que quede solo el encabezado y una sola columna para ajustarse al tamaño del dispositivo. De esta manera, las otras quedan una debajo de la otra. Me explico?

    Hay varios ejemplos de esto, pero solo he visto que en modo Escritorio se ve siempre el encabezado en la parte superior de la tabla, nunca a la izquierda, y cuando se pasa a móvil se puede ver como las columnas de la derecha se restan para pasar a estar una debajo de la otra, en este caso, tal cual como quiero adaptarla.

    Si alguien sabe algo de esto, estaré muy agradecido!

    Saludos!

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • 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.

    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!

    Moderador LGrusin

    (@lgrusin)

    @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.

    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!

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • Debes estar registrado para responder a este debate.