[Resolved] WP table block – change header background color, CSS isn’t working

[Jessica]

Hi! So, I recently started using the WordPress table blocks, and would like to change the background color of the header section. Something is not coded just right for my site, as the CSS I’m finding in previous threads is not working.

I first tried the CSS that David gave in a previous ticket:

.wp-block-table thead tr {
background-color: #f00;
color: #fff;
}

Except I want the background color to be #ddf2ff, with normal colored text (black not white), so I went with just:

.wp-block-table thead tr {
background-color: #ddf2ff;
}

That didn’t work. I later updated my tables to use medium size font for Typography, and tried:

.wp-block-table.has-medium-font-size thead tr {
background-color: #ddf2ff;
}

Also no results. Then I found another thread where Ying gave this CSS for a striped table:

figure.wp-block-table.is-style-stripes > table > thead > tr {
background-color: blue;
color: white;
}

Tried changing it to my black-font-on-light-blue preferences:

figure.wp-block-table.has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

That also didn’t do anything; my cache has been cleared, just in case.

What’s my problem here?

Thank you again!!!

[Fernando]

Hi Jessica,

That should work. How are you specifically adding the CSS?

Can you copy and paste all your custom CSS here?: http://csslint.net/

Check if there are any errors, and correct them if so.

[Jessica]

Hi! The normal way, through Appearance > Customize > Additional CSS.

CSS Lint is a nice tool, thanks. It gave 3 warnings but no errors for:

figure.wp-block-table.has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

It didn’t like the “figure,” and then there were two “disallow overqualified elements” warnings for .wp-block-table.has-medium-font-size.

I managed to get rid of these warnings by changing my CSS to:

.wp-block-table has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

BUT, that CSS still doesn’t result in my table headers having a #ddf2ff background color. They’re white.

Similarly, just .wp-block-table doesn’t do anything, as in

.wp-block-table > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

Any input on why my table blocks are so… untouchable by CSS? It’s not a big issue in terms of site appearance, it’s just become a sort of puzzle where I’m really interested in why! this is.

[Fernando]

Yes, that’s odd. It’s not that the CSS isn’t working, it’s just that the CSS you’re adding isn’t there or isn’t loading. Can you try temporarily disabling Autoptimize and any other Caching/Optimization plugins you have?

[Jessica]

Sure. I tried disabling Autoptimize and a Lazy Load plugin, flushed cache in Flywheel, and this also did not make this CSS work.

I’ve never seen any other CSS blocked by Autoptimize…

But, I don’t have any image-related CSS running, and when I just tried to throw in a box shadow around “.wp-block-image”s to see if that was possible, it’s not working either!

So, I do have jpeg to webp conversion running thru Smush Pro. You think these table blocks are maybe being interpreted as images and that’s interfering?

[David]

Hi there,

can you disable autoptimize so i can take a closer look ?

[Jessica]

OK, done, I’ve disabled Autoptimize again now.

[David]

Ok, can you add the CSS to the site, and leave autoptimize off

[Jessica]

Yes, of course, thanks. I’ve now put the below CSS in, published, & cleared cache:

.wp-block-table has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

[David]

Couple of things:

1. This CSS:

@media (max-width: 768px) {
	.post-image img {
		max-width: 100%;
	}

is missing the closing bracket for the @media query, so any CSS after it will fall into the media query.
Add the bracket to it like so:

@media (max-width: 768px) {
	.post-image img {
		max-width: 100%;
	}
}

2, Change your table CSS to:

.wp-block-table > table > thead > tr {
    background-color: #ddf2ff;
    color: #000000;
}

I suggest that you add this CSS before the above CSS.
Any CSS in @media query is best positioned at the very bottom.

[Jessica]

David, you’re killin’ it!

That missing bracket is such a beginner error, whoops, and I’m surprised that CSS Lint didn’t call it out.

This code now is working just great for me:

.wp-block-table > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}

With the @media CSS at the bottom!

Thanks again for the fabulous support!

[David]

Glad to be of help

[Author]

Posts