{"id":21323,"date":"2025-07-26T06:17:47","date_gmt":"2025-07-26T06:17:47","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&#038;p=21323"},"modified":"2025-07-26T06:17:48","modified_gmt":"2025-07-26T06:17:48","password":"","slug":"how-to-add-custom-css-in-wp-table-builder","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/es\/docs\/how-to-add-custom-css-in-wp-table-builder\/","title":{"rendered":"How to Add Custom CSS in WP Table Builder"},"content":{"rendered":"<p class=\"wp-block-paragraph\">WP Table Builder comes with a <strong>built-in Custom CSS option<\/strong> that allows you to apply custom styles to <strong>all tables<\/strong> on your website\u2014without needing to touch any theme files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the steps below to easily add your custom CSS:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Go to WP Table Builder Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to your WordPress Dashboard:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hover over <strong>Constructor de Tablas WP<\/strong> in the sidebar menu and click on <strong>Settings<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-1024x651.png\" alt=\"\" class=\"wp-image-21324\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-1024x651.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-300x191.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-768x488.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-1536x977.png 1536w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Settings-of-WP-Table-Builder-2048x1303.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Open the \u201cTable Styles\u201d Tab and Enter Your Custom CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019re in the Settings panel, click on the <strong>Table Styles<\/strong> tab at the top.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Custom CSS<\/strong> field, you can write any CSS rules that will apply to <strong>all WP Table Builder tables<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;style><br>.wp-table-builder table {<br>  background-color: #f9f9f9;<br>}<br><br>.wp-table-builder td {<br>  padding: 15px;<br>}<br>&lt;\/style><br><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcf8 Here&#8217;s how it looks in the interface:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-1024x468.png\" alt=\"\" class=\"wp-image-21325\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-1024x468.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-300x137.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-768x351.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-1536x702.png 1536w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2025\/07\/Adding-the-Custom-CSS-2048x937.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">4. Save Your Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After adding your CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>Save<\/strong> button at the bottom right to apply your changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! Your custom styles will now be reflected on all tables built with WP Table Builder.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-ast-global-color-8-color has-alpha-channel-opacity has-ast-global-color-8-background-color has-background is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">If you need help crafting the perfect CSS, feel free to reach out to <a href=\"https:\/\/wptablebuilder.com\/es\/contact\/\" target=\"_blank\" data-type=\"page\" data-id=\"15\" rel=\"noreferrer noopener\">our support team<\/a>. Happy styling! \ud83c\udfa8<\/p>","protected":false},"excerpt":{"rendered":"<p>WP Table Builder comes with a built-in Custom CSS option that allows you to apply custom styles to all tables on your website\u2014without needing to touch any theme files. Follow the steps below to easily add your custom CSS: 1. Go to WP Table Builder Settings Go to your WordPress Dashboard: 2. Open the \u201cTable [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":21326,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[7],"doc_tag":[],"class_list":["post-21323","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations"],"year_month":"2026-08","word_count":191,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Istiak Rayhan","author_nicename":"wpx_roadtobl","author_url":"https:\/\/wptablebuilder.com\/es\/author\/wpx_roadtobl\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/wptablebuilder.com\/es\/docs-category\/configurations\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/docs\/21323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/comments?post=21323"}],"version-history":[{"count":0,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/docs\/21323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/media\/21326"}],"wp:attachment":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/media?parent=21323"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/doc_category?post=21323"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/doc_tag?post=21323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}