CSS not working

[akubrin]

Hi,
I’m trying to modify my tables, but some of my CSS is not working. The th selector should bottom-align the text in the heading row and add a gray background with an alpha, but neither statement is working.
Can anyone help? See code below.
I’m using WP 5.1.1 with the Genesis Framework Parallax Pro theme.
Thanks.

table, th, td {
  border: 1px solid #3B3C41;
}
th {
	vertical-align:bottom;
  background-color: rgba(59,60,65,0.4);
}
th, td {
	border: 1px solid #3B3C41;
  border-bottom: 1px solid #3B3C41;
	padding: 10px;
		line-height: 1.4;
}
td {
		vertical-align: top;
}

https://speakbusinesscomm.com/content-marketing/optimizing-content-audience/

[Victor Font]

You're not using any th elements on the table. Look at the page source in your browser.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[akubrin]

Hi Victor,
You're quite right. Every row in the table is a <tr> element.
How can I select just the first row of every table in my CSS?
Thanks for your help.
Andy

[akubrin]

I should add that the <tr>elements were automatically generated by the WP block editor. If I edit the source, I don't know if WP will leave my changes alone. So I'd prefer to work in CSS.

[Victor Font]

Gutenberg won't allow you to add classes or change the table block source. If you try to edit the table as HTML, it will throw an error about invalid HTML and ask you if you want to convert the table block to a HTML block. If you say yes, you can do anything you want with it because it's all custom HTML now. If you say no, Gutenberg strips any customizations from the block.

You could try adding a class in the advanced field in the right sidebar when you're in the block. Any class you add there, will be added to the table selector like this:

<table class="wp-block-table my-test-class">

Then in your style sheet, you can use:

table.my-test-class tr:first-of-type {
    vertical-align:bottom;
    background-color: rgba(59,60,65,0.4);
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[akubrin]

Hi Victor,
That worked in part, but not completely. The vertical-align:bottom statement is not working, but the background-color: rgba(59,60,60.4) is working well.
Do you know why the header rows still won't bottom align?
Thanks.
Andy

[Victor Font]

Are you trying to center the text in the row you're using as a header. Vertical align centers the text vertically between the top and bottom border. You only have one line of text in each of the header row cells. There's nothing to align vertically.

To center the text in the cell you have to use text-align: center. In which case change the CSS I gave you to:

table.table-style-regular tr:first-of-type td {
    vertical-align: bottom;
    background-color: rgba(59,60,65,0.4);
    text-align: center;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[akubrin]

Hi Victor,
Some of my tables have multi-line headings, and that's why I was looking to bottom-align the text in the first row.
Your code works. Thanks again for your help.
Andy

[Author]

Posts