Silly Admin Trick: Alternate Row Colors in Visualforce without CSS or Jquery for PDF Renderas

In Salesforce.com, when you set up a Visualforce page to ‘renderas’ to export to PDF, there are lots and lots of constraints. I’m going to do a larger post on some of the tips and tricks to get PDF’s in Visualforce looking nice without hardcoding every style.

Today’s silly admin trick is how to get alternate row colors in your table when the PDF render engine in Salesforce.com doesn’t support jquery or the CSS tr:nth-child(odd) trick (which does work in normal Visualforce…just not in the PDF render engine best I can tell). The secret sauce is understanding whether the line in the repeat is odd or even which using the MOD formula function we can easily achieve.

Here’s some sample code:

<apex:variable value=”{!1}” var=”rowNum”/>
<apex:repeat>
<apex:variable value=”{!IF(MOD(rowNum, 2)=0,’bgc’,”)}” var=”bgcolr”/>
<td class=”{!bgcolr}”>{!li.Name}</td>
<apex:variable var=”rowNum” value=”{!rowNum + 1}”/>

bgc is the .bgc css class with: background-color: #f0f0f5;

Email me if you have questions.

Leave a Reply

Your email address will not be published. Required fields are marked *