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

zarakatajamember

VIP

Épsilon

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

Verificado por Binance

Suscripción a IA

• 19 Jun 2020

• #1

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

Zeta

Programador

Verificación en dos pasos activada

¡Ha verificado su Paypal!

• 19 Jun 2020

• #2

si se puede, usando media queries, pero no creo que vaya a quedar bien

 

joacalle503

Beta

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 21 Jun 2020

• #3

De poder se puede, pero es un dolor de cabeza!!!

 

paskuvan

Iota

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

¡Usuario popular!

• 21 Jun 2020

• #4

claro que se puede, usa media queries o flexbox

 

MarkBurns

Beta

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 31 Jul 2020

• #5

Sí se puede sí.

Usando display grid.

y luego con media queries vas cambiando el numero decolumnas

 

kimomalcolmx

Kappa

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

¡Usuario popular!

• 31 Jul 2020

• #6

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

Épsilon

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

Verificado por Binance

• 31 Jul 2020

• #7

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

Beta

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 1 Ago 2020

• #8

Usa display:grid y juegas con los demas valores, grid-columns, grid-rows etc

 

Baires23

Épsilon

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Verificado por Binance

• 13 Ago 2020

• #9

Espero que te sirva:

Tabla responsive

...

codepen.io