In this post, we will implement the functionality to apply CSS to apply alternate table row color in the Visualforce page and PDF. We can use different approaches in Visualforce and PDF to apply alternate row color in the Visualforce page and PDF tables. One of them only works in Visualforce while the other one will work in both Visualforce and PDF. We will implement both.
Let’s get into implementation.
Implementation
We will first create a simple Apex Class to return the list of Account records. We will use these records to display them as a row on a Visualforce page using the table.
This is how our Apex Class would look like:
AlternateRowsController.cls
public class AlternateRowsController {
public List<Account> lstAccounts {get; set;}
public AlternateRowsController(){
lstAccounts = [SELECT Name, AccountNumber, Website FROM Account ORDER BY CreatedDate DESC LIMIT 10];
}
}
And, let’s create a simple Visualforce page as well which will display Account records in the table.
AlternateRows.page
<apex:page standardStylesheets="false" controller="AlternateRowsController">
<table border="1px" style="text-align: center">
<tr style="font-weight: bold">
<td>Name</td>
<td>Account Number</td>
<td>Website</td>
</tr>
<apex:repeat value="{!lstAccounts}" var="acc">
<tr>
<td>{!acc.Name}</td>
<td>{!acc.AccountNumber}</td>
<td>{!acc.Website}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
Alternate Table Row Color in Visualforce Page
Now, in order to apply alternate row color in the Visualforce page, we need to use nth-child(even) and nth-child(odd) CSS selector in a style tag. Then, we can apply any CSS properties we want. For example, changing the background color of the row, which is exactly what we are going to do in this implementation.
Apply the class property to row tag of table which needs alternate color and then add nth-child(even) and nth-child(odd) CSS selector in a style tag. Then, we can apply the background-color property in the selectors.
AlternateRows.page
<apex:page standardStylesheets="false" controller="AlternateRowsController">
<style>
.alternateRow:nth-child(even) { background-color: #dbcfce; }
.alternateRow:nth-child(odd) { background-color: #e0edd8; }
</style>
<table border="1px" style="text-align: center">
<tr style="font-weight: bold">
<td>Name</td>
<td>Account Number</td>
<td>Website</td>
</tr>
<apex:repeat value="{!lstAccounts}" var="acc">
<tr class="alternateRow">
<td>{!acc.Name}</td>
<td>{!acc.AccountNumber}</td>
<td>{!acc.Website}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
That is all. That is how we can apply Alternate Row Color in Visualforce Page. This is how our page would look:

Also Read:
- Google Recaptcha in Salesforce Visualforce with 3 Lines of Code
- Quick Action without Modal in LWC – Headless Quick Action
Alternate Table Row Color in Visualforce PDF
In order to apply Alternate Row Color in Visualforce PDF, we need to follow a different approach and this approach works for the normal Visualforce page and PDF version of Visualforce page as well.
First, we need to create a <apex:variable/> in the Visualforce page. Here I am creating a variable with named counter.
<apex:variable value="{!1}" var="counter" />
Then, use this variable to apply the CSS dynamically for the row tag<tr> like below:
<tr style="background-color:{!IF(mod(counter,2)==0, '#e0edd8','#dbcfce')}">
And finally, we have to increment the counter inside <apex:repeat>:
<apex:variable value="{!counter+1}" var="counter" />
AlternateRows.page
<table border="1px" style="text-align: center">
<tr style="font-weight: bold">
<td>Name</td>
<td>Account Number</td>
<td>Website</td>
</tr>
<apex:repeat value="{!lstAccounts}" var="acc">
<tr style="background-color:{!IF(mod(counter,2)==0, '#e0edd8','#dbcfce')}">
<td>{!acc.Name}</td>
<td>{!acc.AccountNumber}</td>
<td>{!acc.Website}</td>
</tr>
<apex:variable value="{!counter+1}" var="counter" />
</apex:repeat>
</table>
And, this is how our PDF would look like:

Also Read:
- Override CSS in LWC for Standard Components
- Real Time Salesforce Project Scenario: Calculator in Lightning
That is all from this post. If you don’t want to miss new implementations, please Subscribe here.
See you in the next implementation!