Skip to Content

highlight alternate rows with colors in crosstab

Mar 14, 2017 at 09:20 AM


avatar image

Dear Experts,

I have used the following custom CSS to highlight alternate rows in crosstab in design studio. However, it is not working for me. I have gone through the forums but that didnt work either.

Please see the CSS below.

{ .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellTotal, .sapzencrosstab-DataArea .sapzencrosstab-DataCellTotal{ background-color: #F0AB00; }

Any suggestions.



10 |10000 characters needed characters left characters exceeded

Sumit - it looks like you are trying to do CSS on the row header, not the rows itself.

Look at this example from Dinesh using a spreadsheet component - he is checking every other row:


Thanks Tammy for your prompt response.

The CSS mentioned in the link is for the spreadsheet component and doesnt seem to work for Crosstab.



Yes, Sumit, I understand that; my point is in your question you are pointing to a row header area - and recommend you use similar logic as the spreadsheet component (even vs. odd)

* Please Login or Register to Answer, Follow or Comment.

2 Answers

Agata L. Mar 14, 2017 at 02:32 PM

I use the following code to achieve this:

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td {background: #ffffff!important;}

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td {background: #f1edea!important;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(odd) td {background: #ffffff!important;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(even) td {background: #f1edea!important;}

The whole code to make my crosstabs nice-looking is below:

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(odd) td {background: #ffffff!important; text-align: left; }

.myCrosstab .sapzencrosstab-RowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(even) td {background: #f1edea!important; text-align: left;}

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(odd) td {background: #ffffff!important; font-size: 12px; color: #666666; text-align: center; }

.myCrosstab .sapzencrosstab-DataArea tr:nth-child(even) td {background: #f1edea!important; font-size: 12px; color: #666666; text-align: center;}

.myCrosstab .sapzencrosstab-TableDiv {border: 0px!important;}

.myCrosstab .sapzencrosstab-VScrollTable {border: 0px!important;}

.myCrosstab .sapzencrosstab-HScrollTable {border: 0px!important;}

.myCrosstab .sapzencrosstab-HeaderCellDefault {border: 0px!important; text-align: left; }

.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px!important;}

.myCrosstab .sapzencrosstab-HeaderCellDefault,.myCrosstab .sapzencrosstab-DataCellDefault {border: 0px; !important}

.myCrosstab * {border: 0px!important;}

.myCrosstab .sapzencrosstab-DataCellAlternating

,.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {background: white!important;}

.myCrosstab .sapzencrosstab-DimensionHeaderArea,.sapzencrosstab-ColumnHeaderArea {font-size: 12px; color: #aa005f;}

.myCrosstab .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderRow {font-size: 12px; color: #666666; height: 24px ;}

Plus, I change the crosstab setting Always Fill to false in Properties. This makes sure that your crosstab doesn't have the outside border.

10 |10000 characters needed characters left characters exceeded
Vidhya V Mar 14, 2017 at 09:50 AM

Hi Sumit,

Please check below link for your requirement,

Please let me know if you are facing any issue.



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

Thanks Vidhya,

I tried this but it is not overwriting my default CSS of the crosstab. I can still see the rows shaded with gray color which comes by default in crosstab.


Can you share me your CSS code?