CODEWITHSUNDEEP
cssjsfjakarta-ee
yrazlik
yrazlik

Reputation: 10777

CSS does not apply to table rows

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

Upvotes: 0

Views: 127

Answers (2)

Andy
Andy

Reputation: 6568

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?

Upvotes: 1

YD1m
YD1m

Reputation: 5895

Try to use this css selectors:

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

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

Upvotes: 0

Related Questions