Conclusiones clave
- Una tabla responsiva Elementor utiliza uno de los tres patrones en los teléfonos: filas apiladas en tarjetas, un desplazamiento lateral dentro del propio cuadro de la tabla o menos columnas.
- Una tabla de cinco columnas necesita alrededor de 640px de ancho para seguir siendo legible, y la mayoría de los teléfonos muestran entre 360px y 430px, por lo que una tabla ancha se desborda a menos que elijas un patrón.
- ¿el widget Master Addons Dynamic Table apila cada fila en una tarjeta en dispositivos de hasta 768 px de ancho cuando Responsive Table? está activado, que es el valor predeterminado.
- El desplazamiento horizontal toma dos reglas CSS: overflow-x configurado en automático en un contenedor y un ancho mínimo en la tabla dentro de él.
- TablePress tiene una casilla de verificación de desplazamiento horizontal en la configuración de cada tabla y está desactivada de forma predeterminada.
Una tabla responsiva Elementor es aquella que se mantiene legible en un teléfono y las tablas no lo hacen por sí solas. Las columnas necesitan más ancho que un teléfono, por lo que la tabla generalmente sobresale del lado derecho de la pantalla.
Hay tres formas de afrontarlo. Construimos los tres en Elementor 4.3 y los verificamos en una pantalla de teléfono de 390 px de ancho.
Tabla de contenidos
Por qué las mesas se rompen en el móvil
Una mesa no puede envolver sus columnas como lo hace una fila de contenedores Elementor. Cada columna tiene que estar al lado de las demás y cada una necesita espacio para su palabra más larga. Nuestra mesa de envío de cinco columnas es cómoda con aproximadamente 640px. En un teléfono de 390px, el navegador aprieta las columnas hasta que las palabras se apilan con tres líneas de profundidad y luego la última columna cae del borde.
Los propios controles responsivos de Elementor no ayudan mucho aquí. Puede ocultar un widget completo por dispositivo o cambiar su ancho, pero no puede acceder al interior de una tabla y reorganizar sus celdas.
Los tres patrones de mesa responsivos
Cada patrón tiene un costo.
| Patrón | Lo que ve el visitante | Mejor para | Costo |
|---|---|---|---|
| Apilar filas en cartas | Una carta por fila, etiquetas a la izquierda | Las filas se leen una a la vez: horarios, hojas de especificaciones, listas de precios | Es difícil comparar una columna entre filas |
| Desplazamiento horizontal | La mesa normal, deslizada hacia un lado | Comparar valores en una columna | Las columnas permanecen ocultas hasta que el visitante las desliza |
| Ocultar columnas | Una tabla más corta con las columnas clave | Tablas con una o dos columnas opcionales | Los visitantes telefónicos pierden esos datos |
Patrón 1: apila filas en cartas
La apilamiento convierte cada fila en una pequeña carta. La fila del encabezado desaparece y cada celda muestra el nombre de su columna como una etiqueta. Nada está oculto y nadie se desplaza hacia los lados, por lo que es el valor predeterminado más seguro.
El Tabla dinámica widget hace esto con un interruptor.
- Seleccione el widget de tabla dinámica en Elementor.
- En la pestaña Contenido, abrir Ajustes.
- Dejar ¿mesa responsiva? establecer en Sí. Está activado de forma predeterminada.
- Abra la página en un teléfono. Pila de filas en dispositivos de hasta 768px de ancho.
La regla de apilamiento verifica el ancho del dispositivo, por lo que reducir la ventana del navegador de un escritorio no lo activará. Pruebe en un teléfono real o con emulación de dispositivo. Si configura un relleno de celda grande en la pestaña Estilo, verifique que las etiquetas y los valores no se encuentren demasiado juntos en el teléfono.
¿quieres una mesa que se apile sin CSS? El Widget de tabla dinámica tiene la tabla responsiva encendida desde el principio.
Patrón 2: Desplazamiento horizontal
El desplazamiento horizontal mantiene la tabla como está y permite al visitante deslizarla hacia un lado dentro de su propio cuadro. La página en sí no se desplaza hacia un lado. Úselo cuando las personas necesiten leer una columna, como comparar precios.
Para una tabla HTML en el widget HTML de Elementor, envuelva la tabla en un div y agregue dos reglas:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>El min-width evita que el navegador aplaste las columnas y overflow-x: auto agrega el desplazamiento solo cuando la pantalla es más estrecha que eso. Cambie 640 px al ancho que su tabla necesite para permanecer en una línea por celda.
La debilidad es que nada le dice al visitante que hay más a la derecha. Una columna que se corta por la mitad, como en la captura de pantalla, es la mejor pista que puede dar, así que no establezca el ancho mínimo en un valor que termine exactamente en el borde de la columna.
Patrón 3: Ocultar columnas
A veces es bueno tener una columna en un escritorio y no es necesaria en un teléfono. Ocultarlo debajo de un punto de interrupción y la tabla puede caber sin ningún otro cambio.
Agrega una clase a cada uno th y td en las columnas puedes perder y luego ocultar esa clase en pantallas pequeñas:
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>Aquí hide-cols es una clase en la mesa misma. 767px es el punto de interrupción móvil predeterminado de Elementor, por lo que las columnas vuelven a las tabletas.
Sólo oculte lo que un visitante del teléfono puede hacer sin él. Si la columna oculta decide si alguien compra, utiliza apilamiento o desplazamiento.
Tablas responsivas de TablePress en Elementor
Una tabla de TablePress colocada en Elementor se comporta como cualquier otra tabla: las anchas se desbordan. La solución vive en la configuración de TablePress.
- Ir a Prensa de mesa y editar la tabla.
- Desplácese hasta Características de la tabla para visitantes del sitio.
- Garrapata Desplazamiento horizontal. Está desactivado de forma predeterminada.
- Hacer clic Guardar cambios.
En nuestra prueba, esto solucionó el desbordamiento: la tabla se desplazaba dentro de su cuadro y la página se quedaba quieta. TablePress también tiene modos de apilamiento y colapso para teléfonos, y esos son parte de su función paga Tablas Responsivas.
Una lista de verificación móvil rápida
- Abra la página en un teléfono real. Los emuladores omiten el desplazamiento táctil y algunas reglas de ancho del dispositivo.
- Desplácese hacia un lado por la página. Si toda la página se mueve, la tabla se desborda.
- Mantenga breve el texto del encabezado. “Entrega gratuita” se envuelve mejor que “Entrega gratuita en pedidos finalizados”.
- Pon primero la columna más importante. Es el que permanece visible cuando una tabla se desplaza.
- Apunte a texto corporal de 16 px en celdas. Reducir la fuente para que se ajuste a una tabla la hace ilegible.
Preguntas frecuentes
¿cómo hago una tabla que responda en Elementor?
Elija uno de tres patrones. Apile filas en tarjetas con un widget de tabla que lo admita, como Dynamic Table. Envuelva una tabla HTML en un div con overflow-x configurado en automático para que se desplace hacia los lados. O oculte columnas opcionales por debajo de 767px con una consulta de medios CSS.
¿por qué mi mesa Elementor está cortada en el móvil?
La tabla es más ancha que la pantalla y nada le indica cómo adaptarse. Las tablas no pueden envolver columnas, por lo que el ancho adicional se derrama más allá del borde. Agregue un contenedor de desplazamiento, active una opción de apilamiento en el widget de su tabla o elimine una columna en pantallas pequeñas.
¿puedo hacer que una tabla se desplace horizontalmente en Elementor?
Sí. Para una tabla HTML, colóquela dentro de un div con overflow-x: auto y dale a la tabla un ancho mínimo como 640px. Para una tabla de TablePress, marque Desplazamiento horizontal debajo de Funciones de tabla para visitantes del sitio en la configuración de esa tabla.
¿elementor tiene un widget de tabla responsivo?
Elementor no tiene ningún widget de tabla, ni en el complemento principal ni en Pro. Las tablas responsivas en Elementor provienen de widgets complementarios, complementos de tablas como TablePress o tablas HTML con su propio CSS.
¿cuál es mejor en dispositivos móviles, apilados o desplazándose?
Apilar es mejor cuando cada fila está sola, como una clase en un horario. Desplazarse es mejor cuando los visitantes comparan números en una columna, porque las cartas apiladas separan esos números.
Pensamientos finales
Para crear una tabla responsiva de Elementor, decida qué necesita un visitante del teléfono. Apile filas cuando cada fila se lee sola, desplácese cuando se comparan las columnas y oculte columnas solo cuando los datos sean opcionales.
Si prefieres no escribir CSS, Tabla dinámica maneja el patrón de apilamiento desde un interruptor en el panel.
Lectura relacionada
