Respuesta rápida
Abre la tabla en el constructor, haz clic en la pestaña Responsive y activa Enable Responsive Table. Selecciona el punto de corte Tablet (hasta 700px) o Mobile (hasta 375px) y luego elige Stack Direction (Row o Column), Items Per Head y si quieres usar First Row As Header. Cada punto de corte conserva su propio diseño. Haz clic en Save. El modo adaptable es gratuito; desactivar un punto de corte concreto requiere Pro.
Una tabla adaptable cambia su diseño en pantallas pequeñas para seguir siendo legible. En lugar de encoger cada columna, WP Table Builder puede apilar la tabla en bloques más pequeños en tabletas y teléfonos, mientras los visitantes de escritorio ven la tabla exactamente como la creaste.
Requisitos #
| Concepto | Detalles |
|---|---|
| Plan | Gratis y Pro (Disable Breakpoint requiere Pro) |
| Versión del plugin | WP Table Builder 2.3.0 o posterior para el panel que se muestra aquí |
| Tiempo necesario | Unos 3 minutos |
Opciones adaptables #
| Ajuste | Qué hace |
|---|---|
| Enable Responsive Table | Activa los diseños adaptables para esta tabla |
| Width Target | Window usa el ancho del navegador para elegir el punto de corte. Container usa el ancho del área en la que está la tabla, lo que es mejor para tablas en barras laterales o columnas estrechas. |
| Preview Width | El ancho usado para la vista previa en el constructor |
| Breakpoints | Desktop (la tabla tal como se creó), Tablet (hasta 700px), Mobile (hasta 375px) |
| Disable Breakpoint | Desactiva los cambios adaptables para el punto de corte seleccionado (Pro) |
| Max Width | El ancho de pantalla máximo al que se aplica el punto de corte |
| First Row As Header | Repite las etiquetas de la primera fila junto a cada valor al apilar |
| Static First Row | Mantiene la primera fila como una fila normal en la parte superior en lugar de repetirla |
| Stack Direction | Row apila cada fila en un bloque. Column apila cada columna en un bloque. |
| Items Per Head | Cuántas filas o columnas se agrupan bajo cada encabezado al apilar |
Paso 1: Activa el modo adaptable #
- Abre la tabla en el constructor.
- Haz clic en Responsive (pestaña) en el panel izquierdo.
- Activa Enable Responsive Table.
Paso 2: Configura los diseños para tableta y móvil #
- En Breakpoints, haz clic en Tablet o Mobile. El lienzo cambia a ese tamaño de pantalla.
- Elige un valor de Stack Direction:
- Row para tablas de datos, donde cada fila es un elemento (un producto, una persona, un evento).
- Column para tablas comparativas y de precios, donde cada columna es un producto o plan.
- Deja First Row As Header activado para que las etiquetas se repitan junto a cada valor.
- Ajusta Items Per Head (1 es lo mejor para la mayoría de los teléfonos).
- Repite el proceso para el otro punto de corte y luego haz clic en Save.
Los cambios en un punto de corte solo modifican el diseño de ese punto de corte. La nota al pie del panel confirma qué diseño estás editando.
Paso 3: Prueba en dispositivos reales #
Usa Desktop, Tablet y Mobile (iconos de la barra superior) para previsualizar cada diseño y luego abre la página publicada en un teléfono.
Otras opciones para móviles #
- Desplazamiento horizontal mantiene el diseño de escritorio y permite a los visitantes desplazarse hacia los lados.
- Ocultar una columna en móvil elimina las columnas menos importantes en los teléfonos.
- Primera columna fija (Pro) mantiene visibles los nombres de los productos al desplazarse hacia los lados.
Preguntas frecuentes #
¿Las tablas de WP Table Builder son adaptables?
Sí. Activa Enable Responsive Table en la pestaña Responsive y configura los diseños para tableta y móvil. Los visitantes de escritorio siguen viendo la tabla tal como la creaste.
¿Debo apilar por fila o por columna?
Apila por fila cuando cada fila es un elemento, como en una lista de productos. Apila por columna cuando cada columna es un elemento, como en una tabla de precios o comparativa.
¿Cuáles son los puntos de corte predeterminados?
Tablet se aplica hasta 700px de ancho y Mobile hasta 375px. Puedes cambiar el Max Width de cada punto de corte.
¿Cuál es la diferencia entre Window y Container?
Window elige el diseño según el ancho del navegador. Container lo elige según el ancho del espacio en el que está la tabla, lo que conviene a tablas dentro de columnas o barras laterales.
¿Puedo mantener el diseño de escritorio en tabletas?
Sí, con WP Table Builder Pro. Selecciona el punto de corte Tablet y activa Disable Breakpoint.
Documentos relacionados #
- Cómo hacer que una tabla se desplace horizontalmente en WP Table Builder
- Cómo ocultar una columna de tabla en el móvil en WP Table Builder
- Cómo fijar una fila o columna en WP Table Builder
- Cómo usar celdas de encabezado th en la primera fila en WP Table Builder
- Cómo cambiar la altura de las filas y el ancho de las columnas en WP Table Builder
