function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bozotheclownbozotheclown 

Alternating row colors in datatable

Hello.  Does anyone know the code needed to alternate background color rows in a datatable?  In other words, I want odd rows to have a white background and even rows should have a gray background.  I am trying to use.p:nth-child(even)/p:nth-child(odd)...but that code does not seem to be working.

 

Thanks in advance.

 

 

bob_buzzardbob_buzzard

The CSS nth-child construct isn't supported by all browsers - IE and some versions of firefox spring to mind.

 

If this isn't a PDF document then you can do it via javascript - there's a good tutorial for achieving this using jquery at:

 

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
Devendra@SFDCDevendra@SFDC

Hi,

 

You can use rowClasses attribute of <apex:dataTable>.

 

For example,

 

<apex:page tabStyle="Account" controller="displayAccounts">
  <head>
      <style>
      .odd { 
        background-color: #FCF7F7;
      }
    .even {
        background-color: #E3DCDB;
    }
   </style>
  </head>
  <apex:form >
      <apex:dataTable value="{!accountList}" var="acc" rowClasses="even,odd">
          <apex:column value="{!acc.Name}"/>
      </apex:dataTable>
  </apex:form>
</apex:page>

 

Hope this helps :)

 

Thanks,

Devendra
MagulanDuraipandianMagulanDuraipandian

https://sites.google.com/site/infallibletechie/code-for-alternate-background-color-for-rows-in-a-pageblocktable

 

Regards,

Magulan D

Salesforce.com certified Force.com Developer.

SFDC Blog

SFDC Site

If this post is your solution, kindly mark this as the solution.
vlrvlr

And how would you do the same for five different colors, alternating color based on a record value?

Thanks