Change column color in a table

Hi, edmon, I’m another Neve user.

Could you please post a link to a page where you have the table, so we can help provide the CSS for the color change?

Hi Ian, thanks for your help!

Below you can find the code I’m using for the table. I would like to highlight with a different color the 2nd column.

<figure class="wp-block-table is-style-regular"><table><tbody><tr><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td></tr><tr><td class="has-text-align-center" data-align="center"> [Image 1 here]<br><h3><strong>Heading 1</strong></h3>Sub-heading 1</td><td class="has-text-align-center" data-align="center"> [Image 2 here] <br><h3>Heading 2</h3> Sub-heading 2</td><td class="has-text-align-center" data-align="center"> [Image 3 here] <br><h3><strong>Heading 3</strong></h3> Sub-heading 3</td></tr><tr><td class="has-text-align-center" data-align="center"><h3><strong>Price 1<br></strong></h3><strong>Text 1<br></strong><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 1</a></div> </td><td class="has-text-align-center" data-align="center"><h3><strong>Price 2 <br></strong></h3><strong>Text 2</strong><br><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 2</a></div></td><td class="has-text-align-center" data-align="center"><h3><strong>Price 3 <br></strong></h3><strong>Text 3</strong><br><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 3</a></div></td></tr><tr><td class="has-text-align-center" data-align="center">Description 1</td><td class="has-text-align-center" data-align="center">Description 2</td><td class="has-text-align-center" data-align="center">Description 3</td></tr><tr><td class="has-text-align-center" data-align="center"><br></td><td class="has-text-align-center" data-align="center"><span style="color:#a19e9e" class="has-inline-color"> <em>*Note </em></span></td><td class="has-text-align-center" data-align="center"><span style="color:#a19e9e" class="has-inline-color"> <em>*Note </em> </span></td></tr></tbody></table></figure>

All the best

Hello @edomonett!

Thanks for choosing Neve!

You could try to use the code below and see if you like the style. I added the “style=”background-color:blue”” tag to every section from the second column so the whole column will be colored in blue. Feel free to change the color with any other you want.

<figure class="wp-block-table is-style-regular"><table><tbody><tr><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-center" data-align="center"></td></tr><tr><td class="has-text-align-center" data-align="center"> [Image 1 here]<br><h3><strong>Heading 1</strong></h3>Sub-heading 1</td><td class="has-text-align-center" data-align="center" style="background-color: blue"> [Image 2 here] <br><h3>Heading 2</h3> Sub-heading 2</td><td class="has-text-align-center" data-align="center"> [Image 3 here] <br><h3><strong>Heading 3</strong></h3> Sub-heading 3</td></tr><tr><td class="has-text-align-center" data-align="center"><h3><strong>Price 1<br></strong></h3><strong>Text 1<br></strong><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 1</a></div> </td><td class="has-text-align-center" data-align="center" style="background-color: blue"><h3><strong>Price 2 <br></strong></h3><strong>Text 2</strong><br><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 2</a></div></td><td class="has-text-align-center" data-align="center"><h3><strong>Price 3 <br></strong></h3><strong>Text 3</strong><br><br><div class="wp-block-button has-custom-width wp-block-button__width-75 has-custom-font-size is-style-primary has-medium-font-size"><a class="wp-block-button__link" href="">CTA 3</a></div></td></tr><tr><td class="has-text-align-center" data-align="center">Description 1</td><td class="has-text-align-center" data-align="center" style="background-color: blue">Description 2</td><td class="has-text-align-center" data-align="center">Description 3</td></tr><tr><td class="has-text-align-center" data-align="center"><br></td><td class="has-text-align-center" data-align="center" style="background-color: blue"><span style="color:#a19e9e" class="has-inline-color"> <em>*Note </em></span></td><td class="has-text-align-center" data-align="center"><span style="color:#a19e9e" class="has-inline-color"> <em>*Note </em> </span></td></tr></tbody></table></figure>

Have a nice day!

Hi Lucia, thanks for your feedback.

The code works when using custom HTML; however creates a conflict when applying it to a NEVE-styled table (I’m using the “default” NEVE table style).

Is there a way to edit the CSS for the default NEVE table styles?

Thank you.

@edomonett I am not sure I understand exactly what table you are referring to, could you please provide us a screenshot with it? Also, it would be great if you could provide us the URL to your site so we will have a better understanding of the issue and we will be able to help you quicker.

Thank you!

Hi,

The page is not published yet, please see the screenshots here: https://we.tl/t-Y22x8nhZbA .

I would like to have the middle column (2nd) highlighted in a different color.

As you see I’m using the “default” table style in neve

Thanks !

Hello @edomonett,

To highlight a certain color while using the table you can add this css by going to Additional CSS in Customizer:

td:nth-child(2) {
    background-color: yellow;
}

Of course, you can use what color you want and any other styles that you might want to include.

I have used it on a test instance with the table widget and it worked for a table with 3 rows and 3 columns, but maybe you will need to play a bit around with it to get the exact outcome that you want.

Thank you and please let us know if this worked for you!

Hi Mat, this worked perfectly, didn’t need to make any change to the code you shared -Thanks!

@luciamarinescu , thanks for your help as well.

Thanks!

Hello @edomonett,

Awesome! I’m glad we could help!

Thank you and have an amazing day!