Changing font-weight within a table

[PolyWogg]

I was using a couple of block collections, but they clutter up my install and for some “memory” reason, it means sometimes my reusable blocks don’t load. That’s not the problem though. I am doing a bunch of custom CSS to style some tables, and I want to be able to put them in the Weaver XTreme post-specific CSS, and yet for some reason, when I select a row in a table, the font-weight won’t work. I could do it manually, but it seems odd I can’t change it.

Soooo, I created a simple table using default Gutenberg table block, added a “recipe” class to it so I could have more than one table, and saved it here:

https://polywogg.ca/recipe-test/

In that page, Table 1 is the one I’m playing with; Table 2 is similar to what I want from another block; and Table 3 is just there as a control to ensure my changes don’t apply to ALL TABLES, just the first one.

I then went to style it for border (same as my default, but the code works if I change the settings — I will override the Global CSS defaults). Then I do the special alignment (centred, top), also works.  For the next one, I selected row 2, set the font to blue (it works), made the background yellow (it works), and changed the font-weight to bold (**but it doesn’t work**). However, if I use the Nth (odd) setting for rows to make #1 and 3 red font, that works too. EVERYTHING works except font-weight. I have some stuff set in my Global CSS but even if I remove the Font-Weight from there, it still doesn’t allow me to go BOLD. In Inspect, it is set to normal, so something is overriding the setting…if I turn it off in inspect, it goes bold like it is supposed to.

figure.wp-block-table.recipe table {
border: 2px solid #008000;
}

figure.wp-block-table.recipe td {
text-align: center;
vertical-align: top;
}

figure.wp-block-table.recipe tr:nth-child(2) {
color: blue;
font-weight: bold;
background: yellow;
}

figure.wp-block-table.recipe tr:nth-child(odd) {
color: red;
}

FWIW, here is the code Scrambler helped me with a long time ago to set my default table set ups in GLOBAL CSS:

/*Style tables to have green border*/

#content table {border: 2px solid #008000; text-align: left; margin: auto; width: 100%; overflow-wrap: break-word;}

#content tr th, #content thead th {font-size: medium; font-weight: normal; line-height: normal; padding: 2px;}

#content tr td {border: 1px solid #008000; padding: 3px; vertical-align:top}

#content tr.odd td {background: inherit;}

The only place in there for font-weight can be removed, but it seems to make no difference to the styling of the table, and the post settings should be overriding it anyway.

Any ideas?

Paul Sadler

[scrambler]

You are missing the td selector which is the original selector used for the styling

figure.wp-block-table.recipe tr:nth-child(2)  td {
color: blue;
font-weight: bold;
background: yellow;
}

[PolyWogg]

Doh! Thanks as always Scrambler. I’ve re-inserted the TINY MCE plugin that lets me change font colours manually, not my favorite choice, but it works and I don’t have to manually paste the code each time. I’m on the fence which way to go. But at least I have the options now!

Paul

[Author]

Posts