[Resolved] Change Backround cells table

[steven]

Hello there,

I have an article, with several tables, in each table I want to change the red and green color.

I can’t find how to change the color of a specific cell, I saw that I could change the color of an entire row but I want to change the first one

exemple: https://ibb.co/RzGq8jf

Thanks !

[David]

Hi there,

the Table Block is really limited on what you can do with individual cells.
If you wanted to target just that specific 2 row table then you can:

1. Add this CSS to your site:

.bi-color-table tr:first-child td:first-child {
	background-color: #f00;
}
.bi-color-table tr:nth-child(2) td:first-child {
	background-color: #0f0;
}

Change the background colors to suite.

2. Select the Table Block and in Advanced > Additional Class(es) field add: bi-color-table

[steven]

update : I understood the principle and I just succeeded on three lines 🙂

Hi David, thanks you i hope you are well,

I managed to do this for tables with two rows. ( It’s working tahnks you)

Is it possible to do something with this table? :

https://ibb.co/Pxd8Y0m

[David]

So you could do something like this.
First give the table a new class eg. last-color-table

.last-color-table tr td:first-child {
	background-color: #f00;
}
.last-color-table tr:last-child td:first-child {
	background-color: #0f0;
}

The first color will be applied to ALL rows, then the second color will get applied to the last row only.

Are you going to be doing this on LOTS of posts ?

[steven]

Only for this post !

[David]

OK 🙂 thats good lol
Did that last CSS work ?

[Author]

Posts