Skip to Content
Author's profile photo Jeroen van der A

CSS continued, learning from answers from Victor

In some recent discussions about CSS a very useful answer by Victor Gabriel Saiz Castillo. Got me intrigued. He was able to alter the layout properties of the components by looking up the css classes.

In this blog I followed his steps and was able to alter the inner layout of a crosstab.

At first I created a standard crosstab and rendered this on the BI Platform on Google Chrome.


After I did that I used the key combination <CTRL><SHIFT><J>

You get a lot of code of what the site is doing., When you scroll upwards you get to the part where the CSS is loaded for the standard theme.


After double clicking on the CSS you see all the classes within sapzencrosstab.


And now for the test. I’ve used these classes for my own custom css and applied it to my application

This is the code I added into the CSS. I looked up these classes in the CSS code above.

.sapzencrosstab-Crosstab {

  border-spacing: 0;

  font-family: Tahoma, Arial, Helvetica, sans-serif;

  font-size: 8px;

  border-collapse: separate;

  line-height: normal;



.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {

  background-color: #008B8B;


The font size of the numbers is decreased and the alternating color for the rows is changed and this is the result.

Let’s render this crosstab with these new CSS settings


Using this method you can alter every part of the layout of a crosstab. Follow the steps described to look up the part you want to change and add this into your custom CSS file. Changing the properties of that class will result in change in the datasource.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Balreddy
      Murali Balreddy

      Thanks for sharing. This will give us lot more control on the component appearance.

      Author's profile photo Former Member
      Former Member

      Very useful, I was looking for the list of classes which can be used to modify the CROSSTAB component appearance, Thanks for sharing.

      Author's profile photo Former Member
      Former Member

      Hi Jeroen,

      thanks for the information.

      just one remark: It is a nice (and currently the only) way to change the standard components but one has to keep in mind, that by doing so you "overwrite" the standard css-classes for the current application (in which the custom css is used). E.g. those changes would be applied to every crosstab - no matter what you write into the "CSS Class" property of the crosstabs.

      Is there a way to overwrite the css-class independently from the standard css-class?

      (e.g. by ".sapzencrosstab-DataCellAlternating .myDataCellAlternating" and then use that in the CSS Class property of certain crosstabs)

      Any CSS pros?

      Best regards,


      Author's profile photo Former Member
      Former Member

      Hi Marco,

      you can use css classes for that. E.g. following code:

      .AlternateRowClass .sapzencrosstab-DataCellAlternating,
      .AlternateRowClass .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {

        background-color: #008B8B;


      Afterwards you can type in "AlternateRowClass" in the CSS Class box of one crosstab in Design Studio. This class will only apply to the components you choose to.

      Best regards,


      Author's profile photo Former Member
      Former Member

      Thanks for the kind words Jeroen.

      Great Topic, 100% blog-worthy.

      Author's profile photo Former Member
      Former Member

      Hello Victor,

      I was trying to individually assign to a specific crosstab in DS 1.2

      I entered in my CSS file :

      .AlternateRowClass .sapzencrosstab-DataCellAlternating, .AlternateRowClass .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating { background-Color: #FF33CC; }

      In CSS Class box for this crosstab I entered .AlternateRowClass - but there was no effect.

      I double checked if the application is connected to the CSS file and it was.

      Other changes are working.

      When I tried to change .sapzencrosstab components without .AlternateRowClass it was working - but unfortunately for all crosstabs - which I don´t want.

      Do I oversee something ?

      Best regards


      Author's profile photo Former Member
      Former Member

      Hello Emanuel,

      I just did a copy and paste of your code and entered the class AlternateRowClass in the CSS Class entry of a crosstab, it works like a charm!

      Either it was a cache issue or you entered the name starting with the dot.

      Best regards,


      Author's profile photo Mohd Fahad
      Mohd Fahad

      Hi Emanuel,

      I'm pretty sure you would have found the fix, as this post is pretty old.

      Looks like you are missing "AlternateRowClass" in your code highlighted below.

      .AlternateRowClass .sapzencrosstab-DataCellAlternating, .AlternateRowClass .sapzencrosstab-RowHeaderArea, AlternateRowClass .sapzencrosstab-HeaderCellAlternating {

      background-Color: #FF33CC;




      Author's profile photo Arijit Das
      Arijit Das

      So this is how we are supposed to get the list of classes. How pity that SAP has not released any official documentation on the usable classes 🙁 . But it's good to see some good hackers around 😛 .

      Author's profile photo Former Member
      Former Member

      Hi Jeroen,

      Thanks for your  Valuable techniques.Can i make this CSS as a dynamic ?



      Author's profile photo Jeroen van der A
      Jeroen van der A
      Blog Post Author

      Hi Varun,

      thank you for your kind words.

      You can make it dynamic using @media in the custom css. You define classes based on the outcome of the @media So classes can have different properties based on screen size, tilt etc.

      best regards,


      Author's profile photo Raj Srivastava
      Raj Srivastava

      Great information!   How can I see the same information in Internet Explorer 11?