Tablas responsive para Mobile

Con el uso de los media-queries y el display flex, hacemos que una tabla se muestre como grilla en desktop y como lista en mobile.
Para que puedan usar tablas (donde sea requerido) sin tener que hacer scroll horizontal en un celular.
Si la parte de creación y estructura de la tabla no te interesa, podés saltar al minuto 10:51, donde inicia la parte de Responsive.
Si tenés dudas (no solo de este video), podés evacuarlas en los comentarios o participar en las tutorías de programación en vivo, en bit.ly/Padawan...
Buscame sino en tu red social preferida: bit.ly/Pada1sT...

[@OmarGomez-q8y]

excelente video, es exactamente lo que tenia imaginado, pero no sabia como implantarlo en mi código, me vino de perlas, gracias por tu gran aporte.

[@TvCartago]

Después de tanto tiempo sigue siendo muy efectivo para solucionar el problema de la visualización en mobile, muy agradecido por compartir su conocimiento, me ha sido muy util!

[@djvarela]

Excelente, me vino de 10!, ademas me permitió conocer la funcion attr(), muy bueno!. Gracias German como siempre!

[@PadawansTrainer]

Con el attr( ) y ::before se pueden hacer cosas muy interesantes. Abrazo Die!

[@mlygar]

Tremenda explicación!, me salvaste la vida con respecto a poner la tabla responsive en un proyecto, explicas súper, gracias!!

[@PadawansTrainer]

Gracias por tu comentario, Mily, me alegra que te haya servido!

[@Kanthollw]

Excelente el tutorial mi pana, me ha ayudado mucho para resolver problemillas en mobiles. Para quien quiera saber, estos estilos se pueden aplicar a tablas que usen de librerias, por ejemplo, yo la utilicé para modificar la dataTable que ofrece Material UI para React. Obviamente hay que ir probando y jugando con las clases de la propia librería para alcanzar lo que se quiere (Y abusar del !important). Este lo hice por necesidad, pero no es algo recomendado.

[@SrEquixs]

Muchas gracias por la explicación acerca de la adaptación mobile en este vídeo. Tenia un datatable en Angular que había tratado de adaptar a mobile por medio de las clases utilizadas en la asesoría mobile-datatable sin éxito. Gracias a tu explicación lo logre. De nuevo muchas gracias. De todos los vídeos que he visto en esta plataforma desde hace ya algunos años este es el segundo del cual realmente he aprendido. El primero fue hace meses

[@axelstylebender]

Excelente, me funcionó perfectamente, muchas gracias por la explicación. Pueden agregarle un border-right: 1px solid gray; para separar lo que vendría siendo el "titulo" con su contenido

[@PadawansTrainer]

Axel, no se me había ocurrido, pero es una buena solución. Gracias por tu aporte!

[@luisrodiguez1956]

Excelente explicación, muchos dolores de cabeza solucionados en un solo video 👌

[@brunotecay]

Que grande!!! lo que buscaba, muy interesante y explicado de una manera Genial!!! con toda la paciencia del mundo... Un Genio.-

[@dannycastillo_]

Muy buena propuesta para mejorar la experiencia de usuario 👏

[@LiamThiagui]

sos lo mas!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! gracias por esta data!

[@PadawansTrainer]

Muchas gracias por tu apoyo, Cynthia Saludos!

[@JuanGonzalez-cq4nm]

Hola German, me pareció muy bueno el vídeo y la explicación del contenido ¡Muchas gracias!

[@enzososa2231]

Muy buena Explicación!!! me salvaste las papas la verdad., muchisimas gracias por este video.

[@oscar3088]

Muchas gracias. Implementado y funcionando!!

[@mrdominguez]

Buenísimo 👌 gracias es justo lo que estoy necesitando, yo soy más programador back end y apenas me defiendo con boopstrap, de CSS poco y nada 😂

[@ximenafarrera7471]

Me puedes explicar porfavor

[@miguelbegazo3668]

Excelente información, gracias

[@SofiaSoto-mr1qs]

Gracias, muy buen contenido!!!!!

[@PadawansTrainer]

Gracias a vos por el comentario de apoyo! Saludos!

[@juangroverpaxichuquichambi4577]

esto no me la sabia 😅😅 👌👌

[@humbertopena3667]

Hola Germán, seria bueno un vídeo de Webrtc, con easyRtc, o cualquier librería javascript de tu preferencia para crear un video stream. En youtube son contados con los dedos los tutoriales bien explicado sobre ese tema. Un abrazo.

[@PadawansTrainer]

A investigar Webrtc, entonces (porque nunca lo usé). Gracias por la sugerencia!

[@humbertopena3667]

@@PadawansTrainer Excelente, gracias Germán.

[@matteotavernelli1239]

eres un genio 😅😅

[@argentina1387]

Genio! muy buen video y explicas muy bien. muchas gracias

[@harryostaiza4061]

muy buen video y explicas muy bien. muchas gracias por tomarte el tiempo..

[@tazjtulz]

Qué gran tutorial... Muchas gracias!!!

[@facundopestile3021]

Que bueno, me encantó. Te felicito!!! Te hago una consulta como usuario de un panel. En la versión Mobile también se podría aplicar filtros para las columnas?

[@carlavallejos3470]

Muy bueno 👌

[@alejandroarnedo2005]

Excelente contenido

[@PadawansTrainer]

Gracias por tu apoyo dejando este comentario, Alejandro. Saludos!

[@Giangbpro]

UFFF , que buenos tips, no sabia de esto, muchas gracias.

[@ohadrobles]

Excelente explocación

[@chachyluna]

Tremendo hno, no seras el dios del css?

[@CAFernandezB]

Excelente video.. Bro.. Deberías de hacer una serie de css.. Dando estilos a componentes.. Y elementos.. Ya que explicas muy bien.. Saludos.. Y éxitos man.

[@PadawansTrainer]

Muchas gracias por tu sugerencia... perdón por la mega demora (hay algunas notificaciones que KZbin no me ha mandado nunca). Lo voy a tener muy en cuenta. Y se los libero con el código para descargar, que me lo han pedido mucho en estos años.

[@fredishernandez8205]

Pero que útil,muchas gracias

[@matereal9487]

Que grande que sos!

[@antoniocarrera6190]

Excelente mi estimado...

[@pabloantonio7148]

Eres un capo!!!!

[@DanielBallester21]

Gracias locura!!

[@HectorSanchez-vi9hy]

German, excelente video, muy útil! Agrada también tu relato al explicar. A esta tabla le voy a agregar un botón para agregar mas componentes. Necesito para un proyecto crear un formulario de Datos personales (mas de 20 labels e input) y no quiero utilizar Bootstrap. Tendrás material? Muchas gracias. Hector Sanchez de Argentina.

[@PadawansTrainer]

Hola Héctor, bootstrap nunca usé (soy muy vainilla en el desarrollo web) pero te puedo pasar el material de un colega, Javier Arce, que lo grabó para un canal en el que participé hace unos años. Espero encuentres ahí lo que necesitas. Gracias por tus palabras y apoyo hacia mi canal. Abrazo grande y cualquier duda en la adaptación que vas a hacer de la tabla, vos preguntá. Tal vez con un poco de suerte, justo te puedo dar una mano jajjajaja kzbin.info/aero/PLMCtO4953x-7ZjWJcL91Z4u-zVMwd7yWy

[@HectorSanchez-vi9hy]

@@PadawansTrainer Muchas gracias German por la pronta respuesta y la predisposicion ! Te aviso cualquier cosa.

[@PadawansTrainer]

Hector, releí tu mensaje y te contesté cualquier v3rga (entendí que SÍ querías usar Bootstrap, y me decís todo lo contrario). Contame un poco más qué o cómo tiene que funcionar el botón para agregar más componentes (y qué componentes quisieras agregar) y en todo caso te grabo un tutorial si no tengo algo que se parezca.

[@HectorSanchez-vi9hy]

@@PadawansTrainer Buenisimo, si tenes un correo te paso el layout del formulario.

[@andersonrobles3539]

Buenas tardes uan cosnulta, a mi me sale al revez en para moviles primero me sale el nombre que le puse y luego me salio el titulo que se agrega de color plomo como lo puedo solucionar.

[@tiendasteb2848]

Bendiciones

[@JonathanOrtiz-nc8yl]

si dices qie no debe usar tablas para maquetar, entonces que se deberia usar?

[@PadawansTrainer]

Para maquetar una web, las etiquetas semánticas: header, footer, main, section, article, aside, nav (si no queda otra etiqueta que represente lo que vas a hacer, usar div), en combinación con listas (que generalmente dan un buen formato aún sin css). Y bueno, el css necesario para crear el diseño que necesitás (con display flex o grid, según corresponda). Esto tampoco significa "No usemos tablas", hay que usarlas, cuando los datos se van a presentar de forma tabulada, como si fuese un excel en la web (por ejemplo, cualquier grilla de datos de un panel de control). Saludos!

[@somerandomguy000]

Genio!

[@claudioaliagaguerrero1325]

Buen video 😉

[@aranasoftware]

y si la tabla tiene activada la pginacion y el input para filtrar como seria

[@PadawansTrainer]

Imagino que en realidad no afecta al CSS del ejemplo. Esto solo aplica a cómo se ve la tabla, y no afecta (ni debería verse afectado) en cómo funciona la paginación y los filtros. Abrazo!

[@calebgarcia8447]

La tabla no se adapta verticalmente en los iPhone, los estilos los respeta bien pero lo único que hace mal es que la tabla se muestra de forma horizontal. ¿Alguna idea?

[@SrEquixs]

Se que mi respuesta es bastante atrasada pero como solución en mi caso seria hacerlo por ionic. Pero en mi caso no quiero tener la misma aplicación en dos versiones diferentes una en ionic mobile con angular y otra en angular CLI en desktop

[@codigoloa2828]

buena alternativa Bro :)

[@leonardoplaza7677]

ENTENDI LA REFERENCIA PORNO DE AIDA CORTES!!!! Eres un pillin! jajajajajaja Porn Product Placement xD

[@PadawansTrainer]

Guat? Mi socia se llama Aida Cortés. Existe una Porn Star llamada así? Me estoy enterando por vos, jjajjaja, fue un acierto inconsciente XD

[@calceta888]

WOW Pero que he visto?

[@ithielragnaros]

que desmadre para hacer una tabla responsive