Table Shortcode modification

[Judy Huck]

Is it possible to modify the background color of a table cell if you have used the insert shortcode table to create the table?

Thanks.

[Sonl Sinha]

Hi Judy,

Kindly show us your website URL so that we can assist further.

Regards,
Brad

[Judy Huck]

The url is http://www.wildlandfire2016.ca/

The page I am working is not published and I ended up finding a plugin so that Table will show up in the edit mode.

I still would like to find out if you can modify the table cells when creating a table by adding shortcode, table.

Regards,
Judy

[Sonl Sinha]

Hi Judy,

You can modify the table using CSS. Publish the page where you are working with the table then we will send you CSS instruction for the same.

Regards,
Brad

[Judy Huck]

This is a test page that I have created using the insert shortcode for a table. It will have 5 columns and I want to be able to change the color of each cell in the first row.

http://www.wildlandfire2016.ca/test-table/?preview_id=904&preview_nonce=c521cc8121&_thumbnail_id=-1&preview=true

[Sonl Sinha]

Hi Judy,

It shows “Sorry, you are not allowed to preview drafts.”

Did you saved this page in draft?

Regards,
Brad

[Judy Huck]

As far as I know I published it.

[Judy Huck]

It shows as being published. Try this link. http://www.wildlandfire2016.ca/test-table/?preview=true or this one http://www.wildlandfire2016.ca/test-table/

[Sonl Sinha]

Hi Judy,

Add the class in table shortcode so it should be: [su_table class="custom-table"]

Then go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

.custom-table.su-table .su-even td:nth-child(1){background-color: #BA49E4 !important;}
.custom-table.su-table .su-even td:nth-child(2){background-color: #489A21 !important;}
.custom-table.su-table .su-even td:nth-child(3){background-color: #E10005 !important;}
.custom-table.su-table .su-even td:nth-child(4){background-color: #0BAC88 !important;}
.custom-table.su-table .su-even td:nth-child(5){background-color: #4E28FF !important;}

Regards,
Brad

[Judy Huck]

Thank you Brad.

Regards,
Judy

[Sonl Sinha]

🙂

[Author]

Posts