[Request] CSS : Changing Group Level Table Header Color

API & Customization Ask Developers
1

Hi,
I feel like I'm really close with this, but could do with some assistance

I have a table with two levels of grouping : Status and Priority Level. For Example :

IN QA
Priority
Row1
Row2
Normal
Row1
ACTIVE
Priority
Row1

I am looking to color the headings for status to make it easier to read

By using the following CSS I can make the first Status column a different color
#view_464 tr.kn-table-group:nth-child(1) > td:nth-child(1){
background-color:#F59C38;
}

I assumed that the tr.kn-table-group:nth-child(1) section refered to the level 1 grouping so tried this to color ALL the level headings
#view_464 tr.kn-table-group:nth-child(1) {
background-color:#F59C38;
}

However this did nothing and reverted back to the default colour. When I inspect the page and trace the CSS path I get the following :
html body
#knack-body div
#knack-dist_1.kn-content div.kn-scenes.kn-section div
#kn-scene_350.kn-scene.kn-container div
#view_464.kn-table.kn-view.view_464 div.kn-table-wrapper table.kn-table.kn-table-table.is-bordered.is-striped.cell-editable.can-overflow-x tbody tr.kn-table-group.kn-group-level-1

And the CSS selctors for each level-1 heading are :
tr.kn-table-group:nth-child(1)
tr.kn-table-group:nth-child(9)
tr.kn-table-group:nth-child(46)

I can only assume that the nth-child number will change according to how many level 2 groups there are so I don't wanto to hard code those values.

How can I change the CSS for specificall the level-1 groupings ?

2

Thank you, Brad. it worked perfectly !

Dammit I was so close :D

3

Hi Cat - you are close.

Looking at the classes for table group rows they include a group-level included and I think you're wanting to target the .kn-group-level-1 class.

So your CSS might be:

#view_464 tr.kn-table-group.kn-group-level-1 > td:nth-child(1){
          background-color:#F59C38;
    }
1 Like