Customizing table shortcode appearance

Follow instructions below to change the appearance of the su_table shortcode.

First, add custom CSS class to your shortcode. Example:

[su_table class="custom-su-table"]
<table>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
[/su_table]

Then, navigate to Dashboard → Shortcodes → Settings and add the following CSS code to the Custom CSS code field:

/* Table Styles */
.su-table.custom-su-table table {

	/* Border Size, Style, and Color */
	border: 3px solid #00ffff !important;

}

/* Table Cells */
.su-table.custom-su-table table td {

	/* Background Color */
	background: #ff00ff !important;

	/* Text Color */
	color: #ffffff !important;

	/* Text Size */
	font-size: 21px;

}

/* Even Cells (for alternated tables) */
.su-table-alternate.custom-su-table tr:nth-child(even) td {

	/* Background Color */
	background: #ffff00 !important;

	/* Text Color */
	color: black !important;

}

You can play with the code above to adjust colors or to add some extra styling.