How to get a gradient background for table rows with JSF and CSS?

Tags: css,jsf,table,background,gradient

Problem :

I can create a gradient backgrond on the rows (see screenshot), but this is hard-coded to 10 rows. The gradient is repeated when there are more than 10 rows.

Can I create a gradient (from white to black) with a dynamically number of rows (5 row, 10 rows, 21 rows, .. depending on the datasource)

This would be a nice JSF exam questin, but I can't figure it out...


<h:outputStylesheet library="default" name="css/style.css" />
<h:dataTable id="persons" value="#{tableBean.persons}" var="person"
             rowClasses="list-row-1, list-row-2, list-row-3, list-row-4, list-row-5, list-row-6, list-row-7, list-row-8, list-row-9, list-row-10">
    <h:column><h:outputLabel value="#{person.firstName}" /></h:column>
    <h:column><h:outputLabel value="#{person.lastName}" /></h:column>
    <h:column><h:outputLabel value="#{person.jobTitle}" /></h:column>
    <h:column><h:outputLabel value="#{person.birthDate}" /></h:column>
    <h:column><h:outputLabel value="#{person.age}" /></h:column>

StyleCheet: default/1_0/css/style.css

.list-row-1 {
    background-color: #FFF;
.list-row-2 {
    background-color: #EEE;
.list-row-3 {
    background-color: #DDD;
.list-row-4 {
    background-color: #CCC;
.list-row-5 {
    background-color: #BBB;
.list-row-6 {
    background-color: #AAA;
.list-row-7 {
    background-color: #999;
.list-row-8 {
    background-color: #888;
.list-row-9 {
    background-color: #777;
.list-row-10 {
    background-color: #666;

Can this be done with a Bean? The Gradient should be calculated and fit the total numbers of rows: white=first row; black is last row.

Solution :

This is how I did it:

I updated the dataTable like this:

<h:dataTable id="persons" value="#{tableBean.persons}" var="person" rowClasses="#{tableBean.calculatedRowClasses}">

So, with a bean: rowClasses="#{tableBean.calculatedRowClasses}"

Then I calculate the necessary CSS elements to add in a long string:

public String getCalculatedRowClasses() {
    StringBuilder build = new StringBuilder();

    int total = persons.size();
    int factor = 99 / total;    //divide an integer results in an interger

    for (int i = 0; i < total; i++) {
        build.append("list-row-").append(i * factor);   //divide the css over the 100 available in style.css

    return build.toString();

This is not the best solution, but it works this case...

    CSS Howto..

    How to Prevent Linke break for Divs in CSS?

    How to align two anchor tags with text horizontally next to each other?

    How to add CSS inline in Vaadin?

    how to make css :after / :before content clickable on a label element [duplicate]

    How to Use IF Statement in Play Framework to Use CSS for Only 1 Page

    Footer Showing White Bar on only one page of website

    How to make a dynamic layout only by CSS

    Only Javascript code to show a class without onclick

    How to add hover class to jQuery click(function() accordian divs?

    How to replace fixed values in responsible form css

    How to apply styles to neighboring elements in a list

    How to change placeholder color on focus?

    How do you load the css for a Mediawiki tag extension?

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    How do I remove nav underline on hover from Bootstrap theme?

    How to add CSS to my HTML code on Notepad++

    How to create a tag using css

    Web page not responsive: how to use position absolute and relative?

    How to get every line of text / elements of a page centered horizontally?

    How to overlap divs using CSS?

    How to make my HTML suitable for Mobile View

    How to write regex to extract specific key format and value from CSS file?

    How to get this specific responsive nav?

    How can I count HTML elements on a printed page using CSS?

    How do I use CSS to select for a tag with arbitrary name attribute?

    css how to stretch center div to fill allowable area

    Why do small spaces keep showing up in my web pages?

    Showing and hiding content

    How to make a web form with 3 columns?

    Leaflet for R: How to change default CSS cluster classes