Changing the background color of all columns in a table

Programmers documentation > Styling > Using Cascading Style Sheets > Changing the background color of all columns in a table

You can use the labelBackground property to change the background color of all the columns.

How to have all the columns use the same background color

This example shows how to get all the columns to have the same background color. The background color is based on the value of one of the attributes.

The following CSS file is provided as part of the JViews TGO demonstration software at <installdir> /samples/table/customClasses/data/alarm.css.

The following extract in XML shows the business class definition.

<class>

<name>Alarm</name>

<name>identifier</name>

<javaClass>java.lang.String</javaClass>

</attribute>

<name>perceivedSeverity</name>

<javaClass>java.lang.Integer</javaClass>

</attribute>

<name>acknowledged</name>

<javaClass>java.lang.Boolean</javaClass>

</attribute>

<name>creationTime</name>

</attribute>

</class>

The following configuration shows that the background color is changed depending on the value of the attribute perceivedSeverity. In the following style sheet extract, the background color is reset when the object is selected in the table. Selected objects are displayed with the default table selected color.

The pseudoclass selected is used to configure the representation of the selected objects. In this example, the pseudoclass is repeated to increase the specificity of the rule that handles the way a selected object is rendered, thus forcing this rule to have priority over the other rules. See The CSS specification for more information.

object."Alarm/perceivedSeverity":selected:selected

{

labelBackground: '';

}

How to make property values dependent on an attribute value

The following example shows that the background color, label, and tooltip change, depending on the value of the attribute.

object."Alarm/perceivedSeverity"[perceivedSeverity=0] {

labelBackground: '#FFFFFF';

label: Cleared;

toolTipText: "Cleared alarm";

}

object."Alarm/perceivedSeverity" [perceivedSeverity=1] {

labelBackground: '#C0C0C0';

label: Indeterminate;

toolTipText: "Indeterminate alarm";

}

object."Alarm/perceivedSeverity" [perceivedSeverity=2] {

labelBackground: '#FFCC00';

label: Warning;

toolTipText: "Warning alarm";

}

object."Alarm/perceivedSeverity"[perceivedSeverity=3] {

labelBackground: '#FFB200';

label: Minor;

toolTipText: "Minor alarm";

}

object."Alarm/perceivedSeverity" [perceivedSeverity=4] {

labelBackground: '#FF0000';

label: Major;

toolTipText: "Major alarm";

}

object."Alarm/perceivedSeverity" [perceivedSeverity=5] {

labelBackground: '#FF0000';

label: Critical;

toolTipText: "Critical alarm";

}

The background color configuration of the other table columns follows the same principle; the customization of the column identifier is shown in the following example:

object."Alarm/identifier":selected:selected {

labelBackground: '';

}

object."Alarm/identifier"[perceivedSeverity=0] {

labelBackground: '#FFFFFF';

}

object."Alarm/identifier"[perceivedSeverity=1] {

labelBackground: '#C0C0C0';

}

object."Alarm/identifier" [perceivedSeverity=2] {

labelBackground: '#FFCC00';

}

object."Alarm/identifier"[perceivedSeverity=3] {

labelBackground: '#FFB200';

}

object."Alarm/identifier"[perceivedSeverity=4] {

labelBackground: '#FF0000';

}

object."Alarm/identifier"[perceivedSeverity=5] {

labelBackground: '#FF0000';

}