Skip to Content

Crosstab - Rows Coloring

Oct 05, 2017 at 04:09 AM


avatar image


I have requirement to give different rows coloring for the cross tab as described below.

Row 1 Red

Row 2 Yellow

Row 3 Green

Row 4 Blue

Currently I used this CSS code

.Crosstab1 .sapzencrosstab-DataArea tr:nth-child(1) {
   background: red !important;   
.Crosstab1 .sapzencrosstab-DataArea tr:nth-child(2) {
   background: yellow !important;   
.Crosstab1 .sapzencrosstab-DataArea tr:nth-child(3) {
   background: green !important;   
.Crosstab1 .sapzencrosstab-DataArea tr:nth-child(4) {
   background: blue !important;   

Unfortunately, somehow there is a CSS line from library.css prevents me from doing this.

.sapzencrosstab-DataCellAlternating, .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating{ 
background-color: #f5f7f9

If I uncheck this CSS line code on the F12 Developer tools, then my code is working fine.

How do I get around of this issue?

Thank you in advance.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Mustafa Bensan Oct 05, 2017 at 04:50 AM

Hi Donnie,

Your CSS works if you set the Crosstab Alternating Row Style property to "Off" as shown below:



Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Mustafa,

How could I let that single properties escaped my eyes.

Thank you for your help.


No worries. It happens to the best of us :)