Skip to Content

highlight alternate rows with colors in crosstab

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 14, 2017 at 09:50 AM

    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

    Add comment
    10|10000 characters needed characters exceeded