Soporte » Plugins y Hacks » Crear tabla responsive (en verdad)

  • Resuelto armorlan

    (@armorlan)


    Hola, buen dia.
    Quisiera saber si existe algun plugin con el que pudiera crear una tabla transformable (responsive) asi como esta: https://www.pcmag.com/article2/0,2817,2484510,00.asp
    (Revisar versión movil y de escritorio)
    O tendria que hacerla a mano.
    Gracias a todos de antemano.

    • Este debate fue modificado hace 3 meses, 3 semanas por  armorlan.
    • Este debate fue modificado hace 3 meses, 3 semanas por  armorlan.
    • Este debate fue modificado hace 3 meses, 3 semanas por  LGrusin.
Viendo 4 respuestas - 1 de 4 (de 4 total)
  • Moderador LGrusin

    (@lgrusin)

    La tabla es el elemento menos reponsive que existe. Entre otras cosas porque no cabe en la pantalla si tiene demasiadas columnas.

    El ejemplo que has puesto tiene ese problema, de hecho se oculta la tabla en dispositivos móviles, no se muestra porque no cabe.

    La solución puede ser poner overflow-x:auto; de manera que se muestre una barra horizontal que permita recorrer toda la tabla independientemente del tamaño de la pantalla del visitante.

    Un saludo

    Moderador LGrusin

    (@lgrusin)

    @armorlan amplío la info…

    Mientras la tabla pueda adaptarse al tamaño del dispositivo puedes usar en los estilos CSS el ancho de la tabla al 100%. Para las pantallas pequeñas sale la barra de desplazamiento horizontal.

    Es decir:

    <div style="overflow-x:auto;">
    <table>
    ....
    ... contenido de la tabla
    ....
    </table>
    </div>

    y en el archivo style.css

    table {
     width: 100%;
    }

    Un saludo

    Tal y como dice @lgrusin las tablas son lo menos responsive que existe. Se crearon para insertar datos tabulados en pantallas pc.. y eso hace años que ya no es lo normal.

    además de lo que ya se te ha recomendado y si realmente no necesitas la estructura de tabla. Puedes con trabajo manual simular un tabla por medio de capas (etiqueta <div> ) y por medio de css y sus media querys hacer que responda a los diferentes tamaños de pantalla. Pero como te digo, no hay solución mágica automática.. serías tu mismo quien tendría que construirlo.

    un “invento” que he encontrado al repasar tu duda es http://ianrmedia.unl.edu/responsive-table-generator-tool tal vez podría ayudarte.. pero no te fíes mucho y si lo usas testea mucho y en muchas pantallas.

    Un saludo

    Muchas gracias a los dos 🙂

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