Skip to Content

Change color for each column for crosstab in design studio

Hello friends,

I want to change the color for each column for crosstab in design studio.

Say for example for first column I want to set green color,

for second column I want to set red color, and so on

will you please help me in this? I would really appreciate if you provide solution with code.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Dec 04, 2017 at 09:47 AM

    I used DS 1.6 SP5 & Lumira 2.0 Designer SP2 and following css worked for me:

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 27, 2017 at 02:25 PM

    Hi,

    Please find the below URL,

    https://blogs.sap.com/2016/12/15/design-studio-formatting-the-crosstab-component/

    or

    For your example,

    First Column,

    td:nth-child(1) {

    background-color: Green;

    }

    td:nth-child(2) {

    background-color: Red;

    }

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 30, 2017 at 07:57 AM

    Hi Vidhya,

    How we can achieve it for different crosstab, I do not want to apply this on my all crosstab. I just want to apply this only for one specific crosstab only.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Harshil,

      Please create new class name for your specific cross tab and apply that class name for it.

      Try this code:

      .mycrosstab .sapzencrosstab-DataArea td:nth-child(1) { background-color: green !important; }

      .mycrosstab .sapzencrosstab-DataArea td:nth-child(2) { background-color: red !important; }

      Regards,

      Vidhya.C

  • Jun 20, 2017 at 02:38 PM

    Hi Joshi,

    In the custom css file, add a new class including the syntax to format specific columns in the crosstab, in this example the 3rd column :

    .customCrosstabClass td:nth-child(3){

    font-weight: bold;

    background-color: red !important;

    }

    In the property "CSS Class", add the name of the class, customCrosstabClass


    Hans

    Add comment
    10|10000 characters needed characters exceeded