Skip to Content
0

highlight alternate rows with colors in crosstab

Mar 14, 2017 at 09:20 AM

81

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.

Regards

Sumit

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:

https://blogs.sap.com/2016/09/23/customize-your-spreadhseet-using-css/

0

Thanks Tammy for your prompt response.

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

Sumit

0

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)

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

2 Answers

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

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.

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

Hi Sumit,

Please check below link for your requirement,

https://blogs.sap.com/2013/07/21/design-studio/

Please let me know if you are facing any issue.

Regards,

Vidhya.C


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.

0

Can you share me your CSS code?

0