{"id":93,"date":"2011-02-17T15:53:14","date_gmt":"2011-02-17T20:53:14","guid":{"rendered":"http:\/\/cfdbplugin.com\/?page_id=93"},"modified":"2016-12-15T21:55:05","modified_gmt":"2016-12-16T02:55:05","slug":"cfdb-table","status":"publish","type":"page","link":"https:\/\/cfdbplugin.com\/?page_id=93","title":{"rendered":"[cfdb-table]"},"content":{"rendered":"<p><span style=\"font-weight:bold; background-color:#FFFF99;\">This documentation applies to version 2.6 and later<\/span><\/p>\n<h1><strong>Summary of Shortcode Options<\/strong><\/h1>\n<table width=\"100%\" border=\"1\" cellspacing=\"1\" cellpadding=\"1\" align=\"left\">\n<tbody>\n<tr>\n<td valign=\"middle\" width=\"10%\"><strong>Option<\/strong><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><strong>Example<\/strong><\/p>\n<p>&nbsp;<\/td>\n<td width=\"40%\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#form\"><strong>form<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table <strong>form=\"myform\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Required. Designates the form to display. All rows and columns are displayed by default<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#role\"><strong>role<\/strong><\/a><\/td>\n<td width=\"40\"><code>[cfdb-datatable form=\"myform\" <strong>role=\"Author\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Make short code only display output for user&#8217;s with minimum-required role. Choices are<\/p>\n<ul>\n<li>Administrator<\/li>\n<li>Editor<\/li>\n<li>Author<\/li>\n<li>Contributor<\/li>\n<li>Subscriber<\/li>\n<li>Anyone<\/li>\n<\/ul>\n<p><strong>WARNING<\/strong>: this setting is overridden by plugin setting in WP Admin page Contact -&gt; Database Options -&gt; Can See Submission when using shortcodes<br \/>\n(since 2.4.1)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#show\"><strong>show<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <strong>show=\"col1,col2\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Limits columns to be shown to be those designated (comma-delimited list)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#hide\"><strong>hide<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">hide<\/span><strong>=\"col1,col2\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Does not show listed columns (comma-delimited list)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><strong>header<\/strong><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">header<\/span><strong>=\"false\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Show or do not show the table header. Valid values are <strong>true<\/strong> (the default) and <strong>false<\/strong><\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a name=\"headers\"><\/a><strong>headers<\/strong><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">headers<\/span><strong>=\"your-name=Name,ex_field1=Email\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Allows you to change the name displayed in the table header. Map a form field names to a more readable display names. (Since 2.5.1)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#limit\"><strong>limit<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\"\u00a0<strong>limit=\"10\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">One number: limit=&#8221;10&#8243; means show first 10 rows. Is the same as limit=&#8221;0,10&#8243;<br \/>\nTwo Numbers: limit=&#8221;100,10&#8243; means show 10 rows starting at row #100)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#random\"><strong>random<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\"\u00a0<strong>random=\"2\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Display 2 random rows from those that the short code finds. (Since 2.4)<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#orderby\"><strong>orderby<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\"\u00a0<strong>orderby=\"last-name,first-name\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Sort rows by designated columns. Use &#8220;column-name desc&#8221; to sort in descending (reverse) order<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#search\"><strong>search<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\"\u00a0<span style=\"font-weight: bold;\">search<\/span><strong>=\"Simpson\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Select rows to display that have any cell with the search text in it (case insensitive). Intended to mimic behavior of the &#8220;Search&#8221; field in the DataTable<\/td>\n<\/tr>\n<tr>\n<td valign=\"middle\" width=\"10%\"><a href=\"http:\/\/cfdbplugin.com\/?page_id=89#filter\"><strong>filter<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">filter<\/span><strong>=\"col1=Simpson\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Select which rows to display based on filter expression. More powerful than &#8220;search&#8221;, it can filter on multiple columns with boolean and regular expressions. If both &#8220;search&#8221; and &#8220;filter&#8221; are specified, &#8220;search&#8221; is ignored.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"3\" valign=\"middle\" width=\"10%\"><em>Options specific to this shortcode<\/em><\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"middle\" width=\"10%\"><a href=\"#id\"><strong>id<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">id<\/span><strong>=\"myid\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Sets the <strong>id <\/strong>attribute on the <strong>table <\/strong>tag<\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"middle\" width=\"10%\"><a href=\"#class\"><strong>class<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" <span style=\"font-weight: bold;\">class<\/span><strong>=\"myclass\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Sets the <strong>class <\/strong>attribute on the <strong>table <\/strong>tag<\/td>\n<\/tr>\n<tr>\n<td align=\"left\" valign=\"middle\" width=\"10%\"><a href=\"#style\"><strong>style<\/strong><\/a><\/td>\n<td align=\"left\" valign=\"middle\" width=\"40%\"><code>[cfdb-table form=\"myform\" id=\"myid\" <span style=\"font-weight: bold;\">style<\/span><strong>=\"#myid th &gt; td { font-size: x-small; background-color: #E8E8E8;\u00a0 }\"<\/strong>]<\/code><\/td>\n<td width=\"40%\">Injects input CSS into a style tag. Use in conjunction with <strong>id <\/strong>or <strong>class <\/strong>to identify what you are styling.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>The <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">[cfdb-table<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">]<\/code> short code has all the basic shortcode options. But of particular interest to this shortcode are options that help you style the resulting table.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"margin: 0px 0px 22px; padding: 0px; clear: left; font-size: 13px;\"><a name=\"class\"><\/a><a name=\"id\"><\/a> <strong>Apply your CSS to the table<\/strong>: set the table&#8217;s &#8216;class&#8217; or &#8216;id&#8217; attribute:<\/p>\n<ul style=\"margin: 0px 0px 22px 16px; padding: 0px; list-style-type: square;\">\n<li style=\"margin: 0px; padding: 0px;\"><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">[cfdb-table form=\"your-form\" class=\"css_class\"]<\/code>(outputs<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;table class=\"css_class\"&gt;<\/code>(default: class=&#8221;cf7-db-table&#8221; and a &lt;style&gt; tag for it)<\/li>\n<li style=\"margin: 0px; padding: 0px;\"><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">[cfdb-table form=\"your-form\" id=\"css_id\"]<\/code>(outputs<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;table id=\"css_id\"&gt;<\/code>(no default id)<\/li>\n<li style=\"margin: 0px; padding: 0px;\"><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">[cfdb-table form=\"your-form\" id=\"css_id\" class=\"css_class\"]<\/code>(outputs <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;table id=\"css_id\" class=\"css_class\"&gt;<\/code>)<\/li>\n<\/ul>\n<p style=\"margin: 0px 0px 22px; padding: 0px; clear: left; font-size: 13px;\">Applying different styles to different columns: By default, all<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;<\/code>and<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;<\/code>tags are given<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">title=<\/code>the field (column) name. For example, for<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1<\/code>you will see tags:<\/p>\n<ul style=\"margin: 0px 0px 22px 16px; padding: 0px; list-style-type: square;\">\n<li style=\"margin: 0px; padding: 0px;\"><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th title=\"field1\"&gt;&lt;div&gt;field1&lt;\/div&gt;&lt;\/th&gt;<\/code><\/li>\n<li style=\"margin: 0px; padding: 0px;\"><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td title=\"field1\"&gt;&lt;div&gt;{row value for field1}&lt;\/div&gt;&lt;\/td&gt;<\/code><\/li>\n<\/ul>\n<p style=\"margin: 0px 0px 22px; padding: 0px; clear: left; font-size: 13px;\">(Notice the there is a<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;div&gt;<\/code>nested in the<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;<\/code>and<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;<\/code>)<\/p>\n<p style=\"margin: 0px 0px 22px; padding: 0px; clear: left; font-size: 13px;\">Use this<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">title<\/code>attribute to style columns and their headers individually. Example CSS selectors:<\/p>\n<p><a name=\"style\"><\/a><strong>Injecting CSS<\/strong><\/p>\n<p>You can include your own style sheet on the page, but you can also use the shortcode to inject a style tag to handle CSS for your table. To do so, use the <strong>style <\/strong>option, and just put in raw CSS. The shortcode output will wrap that in a &lt;style&gt; tag.<\/p>\n<p>Here are some example of CSS\u00a0selectors you can use to style your table. Assuming shortcode using &#8220;class&#8221; and\/or &#8220;id&#8221;:<\/p>\n<ul>\n<li><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">[cfdb-table form=\"myform\" id=\"myformid\" class=\"myformclass\"]<\/code><\/li>\n<li>and the table includes form field\/table column<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1<\/code><\/li>\n<\/ul>\n<p style=\"margin: 0px 0px 22px; padding: 0px; clear: left; font-size: 13px;\"><strong>Format Column Headers<\/strong>:\u00a0select the<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;<\/code>for column<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1 <\/code><\/p>\n<ul>\n<li><strong>WARNING<\/strong>: This won&#8217;t work to embed in the &#8220;style&#8221; attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.<\/li>\n<li>Using id: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">#<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">myformid<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> th[title=\"field1\"] { \/* add your style here *\/ }<\/code><\/li>\n<li>Using class: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">table.myformclass th[title=\"field1\"] { <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> }<\/code><\/li>\n<\/ul>\n<p>Use this to style just the<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;<\/code>(like its height and width) but not the text in the cell. Remember: the text of the header is nested inside a div (<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;&lt;div&gt;<\/code>)<\/p>\n<p><strong>Format Column Header Text<\/strong>: Similarly, select the nested div (<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;th&gt;&lt;div&gt;<\/code>) for column\u00a0<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1<\/code><\/p>\n<ul>\n<li><strong>WARNING<\/strong>: This won&#8217;t work to embed in the &#8220;style&#8221; attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.<\/li>\n<\/ul>\n<ul>\n<li>Using id:\u00a0 <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">#<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">myformid<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">th[title=\"field1\"] &gt; div { <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">}<\/code><\/li>\n<li>Using class: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">table.myformclass th[title=\"field1\"] &gt; div <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">{ <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> }<\/code><\/li>\n<\/ul>\n<p><strong>Format Data Cells<\/strong><strong>: <\/strong>selects each table cell<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;<\/code>in the column<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1<\/code><\/p>\n<ul>\n<li><strong>WARNING<\/strong>: This won&#8217;t work to embed in the &#8220;style&#8221; attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.<\/li>\n<\/ul>\n<p><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"><\/code><\/p>\n<ul>\n<li>Using id: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">#<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">myformid<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">tbody td[title=\"field1\"] {<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">}<\/code><\/li>\n<li>Using class: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">table.myformclass tbody td[title=\"field1\"] {<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">}<\/code><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Use this to style just the<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;<\/code>(like its height and width) but not the text in the cell. Remember: the text of the field is nested inside a div (<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;&lt;div&gt;<\/code>)<\/p>\n<p><strong>Format Data Cell Text<\/strong>:\u00a0selects the nested div (<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">&lt;td&gt;&lt;div&gt;<\/code>) for column\u00a0<code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">field1<\/code><\/p>\n<ul>\n<li><strong>WARNING<\/strong>: This won&#8217;t work to embed in the &#8220;style&#8221; attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.<\/li>\n<\/ul>\n<p><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"><\/code><\/p>\n<ul>\n<li>Using id: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">#<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">myformid<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">tbody td[title=\"field1\"] &gt; div {<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">}<\/code><\/li>\n<li>Using class: <code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">table.myformclass <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">tbody <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">td[title=\"field1\"] &gt; div {<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">\/* add your style here *\/<\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\"> <\/code><code style=\"font-style: normal; font-weight: normal; font-family: Consolas,Monaco,'Courier New',Courier,monospace; color: #000000; background-color: #ededff;\">}<\/code><\/li>\n<\/ul>\n<p>Use this to specifically format the text in the table cells<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summary of Shortcode Options Option Example &nbsp; Description form Required. Designates the form to display. All rows and columns are displayed by default role Make short code only display output for user&#8217;s with minimum-required role. Choices are Administrator Editor Author Contributor Subscriber Anyone WARNING: this setting is overridden by plugin setting in WP Admin page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1577,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"page-without-sidebar.php","meta":{"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/P1mptf-1v","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":33,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/187"}],"up":[{"embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/pages\/1577"}],"wp:attachment":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}