Highlight first column

Resolved aspotz
(@aspotz)

8 years, 10 months ago
Hi,

I just downloaded the plugin and am trying to highlight only the first column. I want stripe to continue to be enabled. Basically, I want it to be like this: https://www.datatables.net/examples/styling/display.html, except it is only the first column being highlighted (not the column that is being ordered).

I tried:
```
.tablepress .column-1 {
	background-color: rgb(250,250,250);
}
```
But this code literally only changes the background of the first column of the first row (the header row), none of the other rows.

Any help would be greatly appreciated!

Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 10 months ago
Hi,

thanks for your post, and sorry for the trouble.

The reason for this is that the priority of the alternating row colors is a bit higher here, because that uses more elements in the CSS selector.

Please try again with
```
.tablepress-id-123 tr .column-1 {
	background-color: rgb(250,250,250);
}
```
(I also changed the .tablepress to .tablepress-id-123 so that you can choose to apply this only to a specific table, instead of to all TablePress tables.)

Regards,
Tobias
Thread Starter aspotz
(@aspotz)

8 years, 10 months ago

Thank you for the quick reply!

It doesn’t quite emulate the example given here: https://www.datatables.net/examples/styling/display.html

because that code changes the background color of every row in column 1 instead of just “overlaying” or darkening each row by a certain amount. Would you happen to know how to address that? As well as apply to all rows of the column except the header row?
Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 10 months ago
Hi,

ah, you want alternating row colors there as well. For that, try this CSS approach:
```
.tablepress-id-123 tbody tr.odd .column-1 {
	background-color: rgb(250,250,250);
}
.tablepress-id-123 tbody tr.even .column-1 {
	background-color: #cccccc;
}
```
Regards,
Tobias
Thread Starter aspotz
(@aspotz)

8 years, 10 months ago
Thank you!

For those interested, here is the final code to get the behavior I wanted:
```
.tablepress tbody tr.odd .column-1 {
	background-color: #f1f1f1;
}

.tablepress tbody tr.even .column-1 {
	background-color: #fafafa;
}

.tablepress tbody tr:hover .column-1 {
	background-color: #eaeaea;
}
```
Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 10 months ago

Hi,

yes, that would also do the hover effect. 🙂
Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Highlight first column’ is closed to new replies.

Tags