{"id":1908,"date":"2025-03-11T09:10:10","date_gmt":"2025-03-11T09:10:10","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&p=1908"},"modified":"2026-11-13T14:01:03","modified_gmt":"2026-11-13T14:01:03","password":"","slug":"hacer-que-la-tabla-sea-responsive-en-wordpress","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/es\/docs\/make-table-responsive-wordpress\/","title":{"rendered":"C\u00f3mo hacer una tabla responsive en WP Table Builder"},"content":{"rendered":"
\n

Respuesta r\u00e1pida<\/p>\n\n\n\n

Abre la tabla en el constructor, haz clic en la pesta\u00f1a Responsive<\/strong> y activa Enable Responsive Table<\/strong>. Selecciona el punto de corte Tablet<\/strong> (hasta 700px) o Mobile<\/strong> (hasta 375px) y luego elige Stack Direction<\/strong> (Row o Column), Items Per Head<\/strong> y si quieres usar First Row As Header<\/strong>. Cada punto de corte conserva su propio dise\u00f1o. Haz clic en Save<\/strong>. El modo adaptable es gratuito; desactivar un punto de corte concreto requiere Pro.<\/p>\n<\/div>\n\n\n\n

Una tabla adaptable cambia su dise\u00f1o en pantallas peque\u00f1as para seguir siendo legible. En lugar de encoger cada columna, WP Table Builder puede apilar la tabla en bloques m\u00e1s peque\u00f1os en tabletas y tel\u00e9fonos, mientras los visitantes de escritorio ven la tabla exactamente como la creaste.<\/p>\n\n\n

<\/div><\/div><\/div>\n\n\n

Requisitos<\/h2>\n\n\n\n
Concepto<\/th>Detalles<\/th><\/tr><\/thead>
Plan<\/strong><\/td>Gratis y Pro (Disable Breakpoint requiere Pro)<\/td><\/tr>
Versi\u00f3n del plugin<\/strong><\/td>WP Table Builder 2.3.0 o posterior para el panel que se muestra aqu\u00ed<\/td><\/tr>
Tiempo necesario<\/strong><\/td>Unos 3 minutos<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Opciones adaptables<\/h2>\n\n\n\n
Ajuste<\/th>Qu\u00e9 hace<\/th><\/tr><\/thead>
Enable Responsive Table<\/strong><\/td>Activa los dise\u00f1os adaptables para esta tabla<\/td><\/tr>
Width Target<\/strong><\/td>Window<\/strong> usa el ancho del navegador para elegir el punto de corte. Container<\/strong> usa el ancho del \u00e1rea en la que est\u00e1 la tabla, lo que es mejor para tablas en barras laterales o columnas estrechas.<\/td><\/tr>
Preview Width<\/strong><\/td>El ancho usado para la vista previa en el constructor<\/td><\/tr>
Breakpoints<\/strong><\/td>Desktop<\/strong> (la tabla tal como se cre\u00f3), Tablet<\/strong> (hasta 700px), Mobile<\/strong> (hasta 375px)<\/td><\/tr>
Disable Breakpoint<\/strong><\/td>Desactiva los cambios adaptables para el punto de corte seleccionado (Pro)<\/td><\/tr>
Max Width<\/strong><\/td>El ancho de pantalla m\u00e1ximo al que se aplica el punto de corte<\/td><\/tr>
First Row As Header<\/strong><\/td>Repite las etiquetas de la primera fila junto a cada valor al apilar<\/td><\/tr>
Static First Row<\/strong><\/td>Mantiene la primera fila como una fila normal en la parte superior en lugar de repetirla<\/td><\/tr>
Stack Direction<\/strong><\/td>Row<\/strong> apila cada fila en un bloque. Column<\/strong> apila cada columna en un bloque.<\/td><\/tr>
Items Per Head<\/strong><\/td>Cu\u00e1ntas filas o columnas se agrupan bajo cada encabezado al apilar<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

Paso 1: Activa el modo adaptable<\/h2>\n\n\n\n
    \n
  1. Abre la tabla en el constructor.<\/li>\n\n\n\n
  2. Haz clic en Responsive<\/strong> (pesta\u00f1a) en el panel izquierdo.<\/li>\n\n\n\n
  3. Activa Enable Responsive Table<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    Paso 2: Configura los dise\u00f1os para tableta y m\u00f3vil<\/h2>\n\n\n\n
      \n
    1. En Breakpoints<\/strong>, haz clic en Tablet<\/strong> o Mobile<\/strong>. El lienzo cambia a ese tama\u00f1o de pantalla.<\/li>\n\n\n\n
    2. Elige un valor de Stack Direction<\/strong>:<\/li>\n<\/ol>\n\n\n\n