{"id":21323,"date":"2025-07-26T06:17:47","date_gmt":"2025-07-26T06:17:47","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&p=21323"},"modified":"2026-11-13T14:09:41","modified_gmt":"2026-11-13T14:09:41","password":"","slug":"como-agregar-css-personalizado-en-el-constructor-de-tablas-de-wordpress","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/es\/docs\/how-to-add-custom-css-in-wp-table-builder\/","title":{"rendered":"C\u00f3mo a\u00f1adir CSS personalizado en WP Table Builder"},"content":{"rendered":"
\n

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

Para una tabla, \u00e1brela en el constructor, ve a la Settings<\/strong> (pesta\u00f1a), despliega Styles<\/strong>, escribe tu CSS en Extra Styles<\/strong> y haz clic en Apply styles<\/strong>y luego en Save<\/strong>. Para todas las tablas de tu sitio, ve a WP Table Builder > Settings > Table Styles<\/strong>, a\u00f1ade el CSS en Custom CSS<\/strong> y haz clic en Save<\/strong>. Ambas opciones son gratuitas y admiten media queries.<\/p>\n<\/div>\n\n\n\n

El CSS personalizado te permite cambiar detalles que el constructor no tiene como ajuste, por ejemplo un grosor de fuente especial, una sombra o un aspecto distinto en pantallas muy peque\u00f1as.<\/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<\/td><\/tr>
Conocimientos<\/strong><\/td>CSS b\u00e1sico<\/td><\/tr>
Versi\u00f3n del plugin<\/strong><\/td>WP Table Builder 2.1.0 o posterior (vista previa del CSS en el constructor)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
<\/div><\/div><\/div>\n\n\n

A\u00f1adir CSS a una tabla<\/h2>\n\n\n\n
    \n
  1. Abre la tabla en el constructor y haz clic en Settings<\/strong> .<\/li>\n\n\n\n
  2. Escribe estilos<\/code> en Search settings<\/strong>, o despl\u00e1zate hasta Styles<\/strong>y despli\u00e9galo.<\/li>\n\n\n\n
  3. Escribe tu CSS en Extra Styles<\/strong>.<\/li>\n\n\n\n
  4. Haz clic en Apply styles<\/strong> para previsualizarlo en el constructor.<\/li>\n\n\n\n
  5. Haz clic en Save<\/strong>.<\/li>\n<\/ol>\n\n\n
    <\/div><\/div><\/div>\n\n\n

    A\u00f1adir CSS a todas las tablas<\/h2>\n\n\n\n
      \n
    1. Ve a WP Table Builder > Settings<\/strong>.<\/li>\n\n\n\n
    2. Abre Table Styles<\/strong> (pesta\u00f1a). La nota indica que los estilos se aplican a todas las tablas.<\/li>\n\n\n\n
    3. A\u00f1ade tu CSS en Custom CSS<\/strong> y haz clic en Save<\/strong>.<\/li>\n<\/ol>\n\n\n
      <\/div><\/div><\/div>\n\n\n

      Selectores \u00fatiles<\/h2>\n\n\n\n
      Selector<\/th>Afecta a<\/th><\/tr><\/thead>
      .wptb-cell<\/code><\/td>Todas las celdas de la tabla<\/td><\/tr>
      .wptb-image-element-target<\/code><\/td>Im\u00e1genes de los elementos Image<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Usa la herramienta Inspeccionar de tu navegador en la p\u00e1gina publicada para encontrar los nombres de clase exactos que necesitas.<\/p>\n\n\n

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

      Ejemplo<\/h2>\n\n\n\n

      .wptb-cell { font-weight: 500; }<\/code><\/p>\n\n\n\n

      @media (max-width: 600px) { .wptb-cell { font-size: 14px; } }<\/code><\/p>\n\n\n

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

      Consejos<\/h2>\n\n\n\n