Skip to Content
avatar image
Former Member

Design Studio crosstab scroll overwrites CSS


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.

Add comment
10|10000 characters needed characters exceeded

  • Former Member Tammy Powlas

    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:

  • Former Member


    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.

  • Get RSS Feed

1 Answer

  • Jan 17, 2018 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.



    Add comment
    10|10000 characters needed characters exceeded