Tabla responsive

zarakatajamember

VIP
Delta
Domainer
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
28 Nov 2013
Mensajes
544
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

Eta
Programador
Verificación en dos pasos desactivada
Desde
25 Sep 2012
Mensajes
1.345
si se puede, usando media queries, pero no creo que vaya a quedar bien
 

joacalle503

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

paskuvan

VIP
Zeta
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
24 Feb 2014
Mensajes
1.640
claro que se puede, usa media queries o flexbox
 

MarkBurns

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

Usando display grid.

y luego con media queries vas cambiando el numero decolumnas
 

kimomalcolmx

VIP
Dseda
SEO
Videoblogger
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
6 Mar 2013
Mensajes
1.189
puedes probar http://tauhidpro.com/nichetable/#wp
tienen versión gratis y versión pro, y las tablas son responsive,
lo que la mayoría de las veces queda mejor si no es responsive
 

Gabrielt

VIP
Beta
Programador
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
27 Nov 2017
Mensajes
92
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

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

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba