Conditional coloring of the table total based on its positive/negative value

  • 10 January 2020
  • 1 reply

Userlevel 4
Badge +1

Hi community!

I recently got an interesting question in our user support channel:

Is it possible to set conditional coloring of the total based on its positive/negative value? 

And I came up with the following trick…

td.cell.flag-readOnly.flag-number.annotation-total.annotation-explicit.annotation-sum input {

color: green;

td.cell.flag-readOnly.flag-number.annotation-total.annotation-explicit.annotation-sum input[value*="-"] {

color: red;
table widget with totals highlighted


Remark: You may use the same idea to hide zeros in the totals :)

1 reply

Userlevel 4
Badge +4

If I may offer an alternative way to do the same but by different means and with some more configurability?

The table has another feature, under Miscellaneous options, to highlight table cells that are above or below a certain threshold: contents.threshold.high and contents.threshold.low

If you enter 0 (zero) for both values, you will achieve the same ‘positive/negative’ effect, albeit with different default styling: the background will be red or green.

The styling for this a bit awkward to override (needs !important or very specific selectors), but the following should get you there, for table cells:

.tag-table td.cell.annotation-threshold-high {
background-color: transparent !important;
color: green !important;

.tag-table td.cell.annotation-threshold-low {
background-color: transparent !important;
color: red !important;

You might want something less vividly red and green… ;-)

Added value is that you get to use the threshold functionality: flexible definitions and if you leave one of the two open, you can also choose to color just positives or the other way round.

And, finally, that you don’t depend on the presence of the input element and its value attribute contents (an implementation detail which might change sooner than the threshold classes)


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator