6

I need to alternate row colors in a particular way:

The headers is in one color (let's say yellow).

The first, second row (which is actually splitted in two rows at some point) and the third row is in one color (blue)

The fourth, fith (which again splits in two rows at some point) and sixth row should be in a differnet color. (red)

And from here it repeats alternativately. How can I do this? I would appreciate any sample code. Thank you very much!

2
  • Welcome to SFSE, Chicho. I'd recommend looking at doing this in a VF page with JavaScript to do the coloring.
    – Mike Chale
    Jul 7 '13 at 0:36
  • Thanks Mike. But I can't use JavaScript because the page will be rendered as a PDF. Is any other way to it?
    – Chicho
    Jul 7 '13 at 0:37
8

Using CSS, you can specify :nth-child(odd) or :nth-child(even) in order to alternate colors per row. This is compatible with the PDF renderer.

<style>
table tr:nth-child(even) {
    background: #ccc;
}
table tr:nth-child(odd) {
    background: #aaa;
}
</style>
3
  • Thanks! It works but I would like to keep the header with a unique color. Then after the header, the 1st, 2nd, 3rd, and 4th row in one color, and the 5th, 6th,7th,and 8th column in a different color. And so on. Is there a way to do this?
    – Chicho
    Jul 7 '13 at 21:18
  • 1
    You can use tr:first-child to specify the header row, or you could change table tr:nth-child to table tbody tr:nth-child(even/odd) to specify just the body rows. You can also use :nth-child(An+B), such as the following: table tbody tr:nth-child(8n-3), table tbody tr:nth-child(8n-2), table tbody tr:nth-child(8n-1), table tbody tr:nth-child(8n) { background: #ccc; } table tbody tr:nth-child(8n+1), table tbody tr:nth-child(8n+2), table tbody tr:nth-child(8n+3), table tbody tr:nth-child(8n+4) { background: #aaa; }
    – sfdcfox
    Jul 8 '13 at 13:33
  • Great! Thank you!
    – Chicho
    Jul 8 '13 at 17:15
4

One simple way to give alternating colors for a table is to use

<apex:dataTable classes="odd,even">.

then add the below css code:

<style>
.odd {
      background-color:#FFFF66;
     }
.even {
       background-color:#8F2400;
       }
</style>
1
  • welcome to salesforce.stackexchange techie. You can use the {} button in the editor to format code, that way you don't have to encode it either. I've taken the liberty to already do so for you in this case. May 7 '14 at 18:38
1

This is a great example for 2 alternating colors. You may be able to modify to use 3 different colors but this is easy and doesnt affect the header.

<table>
  <thead>
     <tr>
        <td></td>
        <td></td>
        <td></td>
     </tr>
   </thead>
 <apex:variable var="count" value="{!0}"/>
 <apex:repeat value="{!accounts}" var="acc">
   <tr style="{!IF(MOD(count,2)==0, 'background-color: #FFFFFF;','background-color: #E5E7E9;')}">
       <td>acc.Name</td>
       <td/>acc.BillingAddress</td>
       <td/>acc.OwnerId</td>
       <apex:variable var="count" value="{!count+1}"/>
   </tr>
  </apex:repeat>
</table>

Borrowed code from : https://developer.salesforce.com/forums/?id=906F0000000BFRGIA4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.