Cómo hacer una tabla responsive para dispositivos móviles con CSS

zarakatajamember

zarakatajamember Seguir

Préstamo
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
796
Buenas como estan! tengo una tabla de 10 columnas. la cual funciona muy bien en escritorio, pero como es logico en el celular se debe deslizar hacia los costados para ver el contenido.

Queria saber si es posible que la tabla sea responsive. y que quede de la siguiente manera

Nombre|Apellido|Documento|Telefono|Direccion|Ciudad|Pais|CP|WEB|Rating (version escritorio)

que aparezca asi:

Nombre|Apellido
Documento
Telefono
Direccion|Ciudad|Pais
CP|WEB
Rating

Se puede hacer eso con el css?
 
Jxit3

Jxit3

Zeta
Programador
Verificación en dos pasos activada
¡Ha verificado su Paypal!
Desde
25 Sep 2012
Mensajes
1.516
si se puede, usando media queries, pero no creo que vaya a quedar bien
 
joacalle503

joacalle503

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
19 Oct 2019
Mensajes
141
De poder se puede, pero es un dolor de cabeza!!!
 
paskuvan

paskuvan

VIP
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Desde
24 Feb 2014
Mensajes
2.452
claro que se puede, usa media queries o flexbox
 
MarkBurns

MarkBurns

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Jul 2020
Mensajes
62
Sí se puede sí.

Usando display grid.

y luego con media queries vas cambiando el numero decolumnas
 
Gabrielt

Gabrielt

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Desde
27 Nov 2017
Mensajes
831
Te cuento que yo pasé por algo similar. Puedes hacer esto:

Haz dos tablas, una para escritorio:

Nombre|Apellido|Documento|Telefono|Direccion|Ciudad|Pais|CP|WEB|Rating

y otra para teléfonos:

Nombre|Apellido
Documento
Telefono
Direccion|Ciudad|Pais
CP|WEB
Rating

La de teléfonos le estableces por defecto: display: none y cuando se llegue a la medida para teléfonos, con mediaqueries estableces a la de escritorios display: none y a la de teléfonos display: block o display: table (depende si estás aplicando el CSS a la tabla directamente o a un contenedor)
 
MarkBurns

MarkBurns

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Jul 2020
Mensajes
62
Usa display:grid y juegas con los demas valores, grid-columns, grid-rows etc
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!
Registro

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba