Alternate Table Row Color in Visualforce and PDF

by

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:

Alternate Table Row Color in Visualforce
Alternate Table Row Color in Visualforce

Also Read:

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:

Alternate Row Color in Visualforce PDF
Alternate Row Color in Visualforce PDF

Also Read:

That is all from this post. If you don’t want to miss new implementations, please Subscribe here.

See you in the next implementation!

Leave a Comment