Color Hover Specific column-cell

Hi,

thanks for your post, and sorry for the trouble.

The code for that would simply be

.tablepress-id-128 .row-hover .column-1:hover {
	background-color: #2F336B;
}
.tablepress-id-128 .row-hover .column-2:hover {
	background-color: #F4BC00;
}

Note that you don’t need to include/copy this for every row.

Regards,
Tobias

Thanks Tobias,

I want to simplify my stylesheet,

I’m sure there is a way to reduce code for those tables as well.

If you go to https://www.boulonsplus.net/astm-f3125-a325/
then under accordion F3125 Grade A325-1 Chemical Properties
There is a table (ID 14). Here’s the CSS for it.

Most of my tables use a similar code copy/pasted and adapted.
Am I doing it wrong? I mean, It work but is there too much
coding for nothing?

.tablepress-id-14 .row-1 td,
.tablepress-id-14 .row-2 td {
	background-color: #2f336b;
}

.tablepress-id-14 .row-1,
.tablepress-id-14 .row-2 {
	font-weight: bold;
}

.tablepress-id-14 .column-1,
.tablepress-id-14 .column-2 {
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-14 tbody .row-1 td,
.tablepress-id-14 tbody .row-2 td {
	color: #f4bc00;
}

.tablepress-id-14 tbody .row-3 td,
.tablepress-id-14 tbody .row-4 td,
.tablepress-id-14 tbody .row-5 td,
.tablepress-id-14 tbody .row-6 td,
.tablepress-id-14 tbody .row-7 td,
.tablepress-id-14 tbody .row-8 td,
.tablepress-id-14 tbody .row-9 td,
.tablepress-id-14 tbody .row-10 td,
.tablepress-id-14 tbody .row-11 td,
.tablepress-id-14 tbody .row-12 td,
.tablepress-id-14 tbody .row-13 td,
.tablepress-id-14 tbody .row-14 td {
	color: #2f336b;
}

.tablepress-id-14 .row-hover .row-1:hover td,
.tablepress-id-14 .row-hover .row-2:hover td {
	background-color: #2f336b;
}

.tablepress-id-14 .row-hover .row-3:hover td,
.tablepress-id-14 .row-hover .row-4:hover td,
.tablepress-id-14 .row-hover .row-5:hover td,
.tablepress-id-14 .row-hover .row-6:hover td,
.tablepress-id-14 .row-hover .row-7:hover td,
.tablepress-id-14 .row-hover .row-8:hover td,
.tablepress-id-14 .row-hover .row-9:hover td,
.tablepress-id-14 .row-hover .row-10:hover td,
.tablepress-id-14 .row-hover .row-11:hover td,
.tablepress-id-14 .row-hover .row-12:hover td,
.tablepress-id-14 .row-hover .row-13:hover td,
.tablepress-id-14 .row-hover .row-14:hover td {
	background-color: #F4BC00;
}

Hi,

a nice and short form for this block of CSS should be this:

.tablepress-id-14 td {
	text-align: center;
	color: #2f336b;
}
.tablepress-id-14 .row-hover tr:hover td {
	background-color: #F4BC00;
}
.tablepress-id-14 .row-1 td,
.tablepress-id-14 .row-2 td {
	background-color: #2f336b !important;
	font-weight: bold;
	color: #f4bc00;
}

Now, if you have multiple tables that should get this same styling, you should actually consider using “Extra CSS classes”. For example, on the “Edit” screen of each of the tables that should have this styling, add e.g. “tablepress-chemical-properties-table” (or whatever name you want) to the “Extra CSS classes” field.
Then, you would just need this CSS once, for all tables at the same time:

.tablepress-chemical-properties-table td {
	text-align: center;
	color: #2f336b;
}
.tablepress-chemical-properties-table .row-hover tr:hover td {
	background-color: #F4BC00;
}
.tablepress-chemical-properties-table .row-1 td,
.tablepress-chemical-properties-table .row-2 td {
	background-color: #2f336b !important;
	font-weight: bold;
	color: #f4bc00;
}

Regards,
Tobias