+ Start a Discussion
Mitesh SuraMitesh Sura 

Need help with renderAs="PDF" and alternate row style

Hello! all,

I have most simple VF page and still renderAs="PDF" and alternatte row style (table tr:nth-child) wont work in Chrome and FF. If I replace PDF with HTML, it works just fine.

I tried both background and background-color. Thank you in advance.

------------------------------------------------VF Markup --------------------------------------------

<apex:page showHeader="false" title="Quote PDF" cache="true" renderAs="pdf">

<head>
    <style>
        table tr:nth-child(even) {
            background: #C6C6C6;
        }
        table tr:nth-child(odd) {
            background: #FF00FF;
        }
    </style>
</head>

<apex:form >

    <table style="border-collapse: collapse;">     
        <tr>
            <td>
                Row 1 Td 1
            </td>
            <td>
                Row 1 Td 2
            </td>          
        </tr>

        <tr>
            <td>
                Row 2 Td 1
            </td>
            <td>
                Row 2 Td 2
            </td>
Best Answer chosen by Mitesh Sura
Mitesh SuraMitesh Sura
Thank you Ashish. I am using apex:repeat and that seems to be working fine. Below is the code

<table>

<apex:variable value="{!1}" var="i"/>

<apex:repeat value="{!sectionName}" var="section">

 

<tr style="background-color:{!IF(mod(i,2)==0, 'red', 'blue')};">

<td>

{!section}

</td>

</tr>

<apex:variable value="{!i+1}" var="i" />

</apex:repeat>

</table>


All Answers

Ashish_SFDCAshish_SFDC
Hi , 


Use the CSS descendant combinator (juxtaposition) as usual:

table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)

Or 

tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}


http://stackoverflow.com/questions/1569806/trnth-childeven-help-how-to-apply-to-one-class


Regards,
Ashish

Mitesh SuraMitesh Sura
Thank you Ashish. I am using apex:repeat and that seems to be working fine. Below is the code

<table>

<apex:variable value="{!1}" var="i"/>

<apex:repeat value="{!sectionName}" var="section">

 

<tr style="background-color:{!IF(mod(i,2)==0, 'red', 'blue')};">

<td>

{!section}

</td>

</tr>

<apex:variable value="{!i+1}" var="i" />

</apex:repeat>

</table>


This was selected as the best answer