Rich Faces dataTable StyleClass Issue

Question

Version :

Apache MyFaces 2.1.14 Rich Faces 4.3.5

Issue :

We are migrating from JSF1.2 to JSF2. The issue is the style for headerClass is not getting applied correctly for rich:dataTable. When debugged , it seems that rich faces overrides the headerClass style with its own styles. The syle selector .rf-dt-hdr-c of rich faces overrides the custom style sheet selector. (We want to replace the colour of header with custom header image)

Finally , when rich faces supplied style (.rf-dt-hdr-c) is overriden like shown in code below , it worked. But since it is rich faces built in style , it will be applied to every rich:dataTable which may not be a good option. The approch as shown here which is similar , is not working here since there is no provision to combine custom style with built in one. Is there any better approach available to solve this issue ? Is there any way custom style can be applied alongwith .rf-dt-hdr-c so that it won't effect globally ? Please help.

Code :

Rich data Table snippet :

 <rich:dataTable id="admin" headerClass="richTableHeader1" styleClass="richDataTable1" rowClasses="evenRow,oddRow" 
                    columnClasses="columnRow" value="#{bean.list}" var="val">

Styles :

.richDataTable1{    
    width:100%; 
}

<!-- this is the headerClass style used to apply custom image (not working )-->
.richTableHeader1{

    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;
}

<!-- rich faces applied style overriden (working )-->
.rf-dt-hdr-c{
    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;

}

Answer 1

This is a table header:

<thead id="form:j_idt10:th" class="rf-dt-thd">
    <tr id="form:j_idt10:h" class="rf-dt-hdr">
        <th class="rf-dt-hdr-c" colspan="2" scope="colgroup">Table</th>
    </tr>
</thead>

@headerClass is applied to the tr.rf-dt-hdr element. So you have to change your definition to

.richTableHeader1 th {
    background-image:url(../images/heading1.gif) !important;
    background-color: #FFFFFF !important;
}

Alternatively you can use @headerCellClass, it is not a documented feature but it works.