[SalesForce] alternating row colors in a VF table rendered as PDF

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!

Best Answer

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>

Related Solutions

[SalesForce] Display records on next row in table

What you could do is loop over your records and write regular HTML. Count the rows you wish to show, and then check each cycle with a remainder division (where the divisor is the amount of columns you want) if you need to write a new tablerow.

I was a bit bored, and decided to do this:

My Controller/Extension:

public with sharing class Tester {
public List<String> records{get;set;}

public Tester()
{
    records = new List<String>();
    records.add('rec1');
    records.add('rec2');
    records.add('rec3');
    records.add('rec4');
    records.add('rec5');
    records.add('rec6');
    records.add('rec7');
    records.add('rec8');
    records.add('rec9');
    records.add('rec10');
    records.add('rec11');
    records.add('rec12');
}
}

Visualforce Page:

<apex:page controller="Tester">
    <apex:variable value="{!1}" var="counter"/>
    <table>
        <tr>
            <apex:repeat value="{!records}" var="rec">
                <td>{!rec}</td>
                <apex:outputText rendered="{!AND((MOD(counter, 4) == 0), (counter < records.size))}" value="</tr><tr>" escape="false"/>
                <apex:variable var="counter" value="{!counter + 1}"/>
            </apex:repeat>
        </tr>
    </table>
</apex:page>

[SalesForce] How to add page breaks to visual force page rendered as pdf so that a dynamically rendered list in apex repeat tag does not strech the table lines

I found an easy solution for the problem, no need to implement any logic for the same just included the following attribute -fs-table-paginate: paginate; in tables style tag and worked like a miracle.

Best Answer

Related Solutions

[SalesForce] Display records on next row in table

[SalesForce] How to add page breaks to visual force page rendered as pdf so that a dynamically rendered list in apex repeat tag does not strech the table lines

Related Topic