Skip to Content

Design Studio crosstab scroll overwrites CSS

Jan 13 at 01:58 PM


avatar image


I have a crosstab with keyfigures in rows and date drill in column.

My requirement is to colour the second key figure say kf2 row to be colored.

I wrote below CSS to achive the requirement and its working fine.

. mycrosstab .sapzencrosstab-DataArea tr:nth-child(2) {

background-color: gray;


Now, the problem occurs when I scroll down to see other keyfigures. When scrolled whichever keyfigure falls at second place gets colored.

I tried with panel but there problem is row header and column header is not freezed.

Please suggest any alternative solution for this.

10 |10000 characters needed characters left characters exceeded

Hi - would it be possible to share some screen shots? Which version of Design Studio are you using?

Another option to consider is the scrollable container in Lumira Designer 2.1



I am working with version 1.6.

And developing the report in M mode.




Hello - you can try using the !important (see with the CSS; if that doesn't work, please use the image icon to upload screen shots


Thanks for the reply Tammy,

I tried using !important, its still behaving same.

Here the problem I guess is, when we scroll CSS does not consider the crosstabs which have been scrolled up and is hidden. It only considers and apply the formatting to the current displayed rows.

Best Regards,

Mithilesh Prasad

ct-css.jpg (84.2 kB)

OK - look at this thread and see if the solution helps you:



Your requirement seems to be related to colouring the data, more so than the cross tab itself. Because the structure of the HTML for the crosstab is not data aware (hence the scrolling issue) I do not believe you will be able to achieve this via CSS. I would think however that you would be able to achieve it via conditional formatting functionality which will be data aware.

Does your requirement apply to just a single datasource or were you trying to achieve a solution that would be generically applied to any datasource?

Another option leveraging your existing approach would be to enable pixel-based scrolling in your cross tab. This however will only be of use if you have only a limited dataset size since enabling pixel based scrolling brings within it a two count limitation. Pixel-based scrolling will however return the full limited roust to the browser so you will have a static HTML structure you can address using the nth-child approach.

Cheers, Ivan.

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

1 Answer

Zahid Yener Jan 17 at 08:48 AM

This can be done with Lumira Designer 2.1 with Dimension Conditionals. If you are using version 1.6, you need to upgrade to version 2.1.



10 |10000 characters needed characters left characters exceeded