{"id":34577,"date":"2019-08-30T10:07:04","date_gmt":"2019-08-30T10:07:04","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&#038;p=34577"},"modified":"2020-11-19T06:38:30","modified_gmt":"2020-11-19T06:38:30","slug":"customizing-table-shortcode-appearance","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/customizing-table-shortcode-appearance\/","title":{"rendered":"Customizing table shortcode appearance"},"content":{"rendered":"\n<figure class=\"wp-block-image alignwide\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"471\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57.png\" alt=\"\" class=\"wp-image-34578\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57.png 837w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57-512x288.png 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57-128x72.png 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57-768x432.png 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57-80x45.png 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/image_WordPress-\u2013-Just-another-WordPress-site_2019-08-30_13-09-57-24x14.png 24w\" sizes=\"auto, (max-width: 837px) 100vw, 837px\" \/><\/figure>\n\n\n\n<p>Follow instructions below to change the appearance of the su_table shortcode.<\/p>\n\n\n\n<p>First, add custom CSS class to your shortcode. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;su_table class=\"custom-su-table\"]\n&lt;table>\n&lt;tr>\n&lt;td>Table cell&lt;\/td>\n&lt;td>Table cell&lt;\/td>\n&lt;\/tr>\n&lt;tr>\n&lt;td>Table cell&lt;\/td>\n&lt;td>Table cell&lt;\/td>\n&lt;\/tr>\n&lt;\/table>\n&#91;\/su_table]<\/code><\/pre>\n\n\n\n<p>Then, navigate to <em>Dashboard \u2192 Shortcodes \u2192 Settings<\/em> and add the following CSS code to the <em>Custom CSS code<\/em> field:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Table Styles *\/\n.su-table.custom-su-table table {\n\n\t\/* Border Size, Style, and Color *\/\n\tborder: 3px solid #00ffff !important;\n\n}\n\n\/* Table Cells *\/\n.su-table.custom-su-table table td {\n\n\t\/* Background Color *\/\n\tbackground: #ff00ff !important;\n\n\t\/* Text Color *\/\n\tcolor: #ffffff !important;\n\n\t\/* Text Size *\/\n\tfont-size: 21px;\n\n}\n\n\/* Even Cells (for alternated tables) *\/\n.su-table-alternate.custom-su-table tr:nth-child(even) td {\n\n\t\/* Background Color *\/\n\tbackground: #ffff00 !important;\n\n\t\/* Text Color *\/\n\tcolor: black !important;\n\n}<\/code><\/pre>\n\n\n\n<p>You can play with the code above to adjust colors or to add some extra styling.<\/p>\n","protected":false},"featured_media":0,"template":"","docs_category":[23],"class_list":["post-34577","docs","type-docs","status-publish","hentry","docs_category-customization"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/34577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=34577"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=34577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}