Qué es
Una tabla con muchas columnas, o una construida con medidas fijas en lugar de flexibles, es naturalmente ancha — lo cual está bien en una pantalla de escritorio, pero no se encoge para caber en una pantalla mucho más estrecha de móvil del modo en que lo hace la mayoría del resto del contenido en una página bien construida. En su lugar, o bien obliga a toda la página a desplazarse hacia los lados, o queda incómodamente apretada y difícil de leer.
En qué afecta
El desplazamiento hacia los lados es una de las cosas más chocantes con las que puede encontrarse un visitante en un móvil — rompe el patrón normal de desplazamiento vertical que la gente espera en cualquier otro sitio de la web, y es fácil pasar por alto genuinamente contenido que queda justo fuera de la pantalla a la derecha sin darse cuenta siquiera de que está ahí. En una página que por lo demás es perfectamente adaptable al móvil, una sola tabla ancha y sin envolver puede ser lo único que haga que toda la experiencia se sienta rota para un visitante móvil.
Cómo solucionarlo
- Identifica qué tablas de tu web tienen muchas columnas o se construyeron con anchos fijos en píxeles en lugar de flexibles.
- Envuelve cada tabla ancha en un contenedor con la propiedad CSS
overflow-x: auto— esto mantiene intacto el propio diseño de la tabla pero permite a un visitante desplazar solo esa tabla hacia los lados con un gesto del dedo, en lugar de que se desplace toda la página. - Para tablas con muchas columnas, considera en su lugar un patrón de tabla adaptable — por ejemplo, apilando cada fila en su propia tarjeta con etiquetas en pantallas estrechas en lugar de mantener el diseño de cuadrícula tradicional en todos los tamaños.
- Si usas un creador de webs, comprueba si su bloque de tabla ya tiene un interruptor de "desplazamiento móvil" o "adaptable" antes de construir una solución personalizada.
- Prueba el arreglo en una pantalla estrecha de móvil real (o el modo de vista previa móvil de tu navegador), no solo redimensionando una ventana de navegador de escritorio, ya que el desplazamiento táctil se comporta de forma distinta al del ratón.