[Plugin: WP-Table Reloaded] WP Table Reload – Change Font on First Row

Hi Phil,

changing the font color in the first row can be done with this:

.wp-table-reloaded-id-2 .row-1 td {
  color: #0000ff;
}

To apply the same CSS commands to several columns/rows, just combine the CSS selectors with a comma. So, for the columns that you want 20px wide, the code would be:

.wp-table-reloaded-id-2 .column-3,
.wp-table-reloaded-id-2 .column-4,
.wp-table-reloaded-id-2 .column-5,
.wp-table-reloaded-id-2 .column-6,
.wp-table-reloaded-id-2 .column-7,
.wp-table-reloaded-id-2 .column-8 {
  width: 20px;
}

Regards,
Tobias

I appreciate the assistance. I still cannot change the font color for the first row in my table.

I created a new table with ID 9. It’s a simple three column three row table. I removed all my other Custom CSS code thinking there might be some conflict. Below is the code I used.

.wp-table-reloaded-id-9 .row-1 td {
color: #0000ff;
}

I copied and pasted from the email into the Custom CSS box as well as doing it from this page just in case there’s some hidden characters that might have been applied.

Hi,

ah, my bad. As the first row is the table header, we need to use th instead of td in the code.

Please try again with

.wp-table-reloaded-id-9 .row-1 th {
  color: #0000ff;
}

Regards,
Tobias

I had to deselect the default CSS setting to get it to work. I guess that has priority over the custom CSS. Then reading through the other Q&A and forum posts I remember seeing the “!important” option to set precedence. In the end I was able to get it and I do appreciate your help. I incorporated some things you showed me and what I read on this forum, without it I wouldn’t have been able to format the table. (Yes the table looks hideous, just playing around right now)

.wp-table-reloaded-id-9 .row-1 th {color: #0000ff!important;}
.wp-table-reloaded-id-9 .row-3 {color: #0000ff;}
.wp-table-reloaded-id-9 .row-1 th,
.wp-table-reloaded-id-9 .row-2,
.wp-table-reloaded-id-9 .row-3
{font-size:20px!important;}
.wp-table-reloaded-id-9 .column-1 {text-decoration:underline!important;}
.wp-table-reloaded-id-9 .column-3 {color: #0000ff;}
.wp-table-reloaded-id-9 .column-3 {font-size:20px;}

Hi,

ah, yes, forgot about that as well…

Usually, the “Custom CSS” overrides the default CSS, but not in all cases, but that is more a result of how CSS works.
For those cases, the !important keyword can be used, so great that you found it ?? With that, it should be possible to turn the “Default CSS” on again.

Best wishes,
Tobias