CSS does not apply to table rows

Question

I am trying to make odd and even rows having different color. Here is my code:

 <h:head>
    <h:outputStylesheet library="css" name="styles.css"  /> 
    <title>Facelet Title</title>
</h:head>
<h:body>
    <h:form>
        <h:dataTable   id="accountsTable" value="#{currentCustomer.accounts}" var="accounts" styleClass="accountsTable" headerClass="accountsTableHeader" rowClasses="accountsTableOddRow,accountsTableEvenRow" >
            <h:column>
                <f:facet name="header">Account Number</f:facet>
                    #{accounts.accountNumber}
            </h:column>
            <h:column>
                <f:facet name="header">Currency</f:facet>
                    #{accounts.accountCurrency}
            </h:column>
            <h:column>
                <f:facet name="header">IBAN</f:facet>
                    #{accounts.iban}
            </h:column>
            <h:column>
                <f:facet name="header">Account Number</f:facet>
                    #{accounts.accountNumber}
            </h:column>
        </h:dataTable>
    </h:form>
</h:body>

and the css file:

root { 
    display: block;
}


.accountsTable{   
  border-collapse:collapse;
   border:1px solid #000000;
   background-color: red;
}

.accountsTableHeader{
       background:none repeat scroll 0 0 #B5B5B5;
   border-bottom:1px solid #000000;  
   padding:2px;
}

.accountsTableOddRow{
   text-align:center;
  background:none repeat scroll 0 0 #FFFFFFF;   
}

.accountsTableEvenRow{
   text-align:center;
   background:none repeat scroll 0 0 #D3D3D3;
}

And my file organization:

enter image description here

But all rows are still white. Can anyone help me with this?

Thanks

@YD1m i do not know what is that? Is this about css or about the code? — yrazlik, Jul 06 '13 at 20:05
@Andy thank you i just had a chance to try your solution and it works — yrazlik, Jul 07 '13 at 09:27

score 1 · Accepted Answer · edited May 23 '17 at 12:14

If you want to use

<h:outputStylesheet library="css" name="styles.css"  />

You need to do the following. Create a folder called resources under Web Pages and place the folder css in it. Your styles are not being applied because it's looking in that folder (resources) for the css folder.

Check this link to sort of see a visual description of what I mean. The first picture you see (the directory one).

Alternatively you can do

<h:outputStylesheet name="/css/styles.css"  />

Also check this link to see how library should really be used.

What is the JSF resource library for and how should it be used?

YD1m · Answer 2 · 2013-07-06T20:17:49.727

0

Try to use this css selectors:

tr:nth-child(even) {
   text-align:center;
   background:#D3D3D3;

}
tr:nth-child(odd) {
   text-align:center;
    background:#FFFFFFF;
}

edited Jul 06 '13 at 20:17

answered Jul 06 '13 at 20:09

YD1m

5,845
2
19
23

thanks but doesnt work either. do i need to change anything else in the html code? – yrazlik Jul 06 '13 at 20:12

CSS does not apply to table rows

2 Answers2