[Support request] Adjusting table column width and color of alternating rows

[Linda]

I am trying to create a table like this: https://i.postimg.cc/43Fq3SY1/Table.jpg
I am struggling on how to adjust the width of each table column and how to have a difference color in alternating rows. I tried putting “width: 120px” within the <td class= …/td> in the code editor for the first column and it seemed to work when I looked at it in the visual editor. When I went back to the code editor the “width: 120px” disappeared in the code.

[David]

Hi there,

can you share a link to where i can see this table ?

[Linda]

I am re-creating the site locally so I can’t share it. If you want to see the actual site https://cosmosyachtcharters.com/Georgian-Bay-Rates-All-Inclusive.html
I need to create tables on 5 different pages, some with 4, 5, and six columns.

[Ying]

Hi Linda,

Are you using a table block to make the table?

If so, you can try this CSS for the background color:

.wp-block-table tbody tr:nth-child(odd) {
    background-color: rgb(153, 153, 153);
}
.wp-block-table tbody tr:nth-child(even) {
    background-color: rgb(204, 204, 204);
}

and this CSS to target the first cell on each row:

.wp-block-table tbody > tr > td:first-child {
    max-width: 120px;
}

[Linda]

While waiting for a reply I did some research and found a plugin for tables and have decided to go that route, but thank you for your time. I will copy the css in this post to experiment later.

[Ying]

No problem!
Glad you found a plugin for that 🙂

[Author]

Posts