Question

I'm using a rich:dataTable and I want every other cell to have a different color (zebra color effect). How can I implement this in my .css file?

<rich:dataTable value="#{uploader.files}" var="_data" id="files">
    <rich:column>
        <f:facet name="header">
            <h:outputText value="File name" />
        </f:facet>
        <h:outputText value="#{_data.name}" />
</rich:column>
Was it helpful?

Solution

Every cell should have a css class (.rf-cst-c it is in the actual richfaces showcase), so you could do something like:

.rf-cst-c:nth-child(odd) td {
        background: #000;
}
.rf-cst-c:nth-child(even) td {
        background: #5b5b5b;
}
.rf-cst-c:nth-child(3n) td {
        background: #fff;
}

If the css class is changing due to different versions of rich faces, it should be no problem to use your browser's debugging tools and get hold of the css class in use.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top