01. Tabla adaptativa

Este ejemplo es una tabla normal que mediante @media queries se le aplicará un formato especial pasando cada TH del THEAD a una celda anterior a cada celda del contenido consiguiendo repetir la cabecera de la tabla de manera vertical para cada una de las filas de datos.

Nombre Apellidos Cargo Twitter ID
Martín Iglesias Lenci Desarrollador @martinigleu 1
Martín Iglesias Lenci Desarrollador @martinigleu 2
Martín Iglesias Lenci Desarrollador @martinigleu 3

02. Tabla dentro de div adaptativo

Este ejemplo es una tabla normal encajada dentro de un divisor definido al 100% de ancho que mostrará barra de scroll automáticamente si es necesaria. La tabla no varía su apariencia original.

Nombre Apellidos Cargo Twitter ID
Martín Iglesias Lenci Desarrollador @martinigleu 1
Martín Iglesias Lenci Desarrollador @martinigleu 2
Martín Iglesias Lenci Desarrollador @martinigleu 3

03. Tabla con columnas descartables adaptativa

Este ejemplo es una tabla normal que esconderá las columnas marcadas con la clase "descarto" cuando el tamaño de pantalla empieza a apretar.

Nombre Apellidos Cargo Twitter ID
Martín Iglesias Lenci Desarrollador @martinigleu 1
Martín Iglesias Lenci Desarrollador @martinigleu 2
Martín Iglesias Lenci Desarrollador @martinigleu 3

04. Tabla con tamaño de letra adaptable

Este ejemplo es una tabla normal que reducirá el tamaño de la tipografía al mostrarse en dispositivos móviles.

Nombre Apellidos Cargo Twitter ID
Martín Iglesias Lenci Desarrollador @martinigleu 1
Martín Iglesias Lenci Desarrollador @martinigleu 2
Martín Iglesias Lenci Desarrollador @martinigleu 3

volver al artículo