Apex Code Development You need to sign in to do that
Don't have an account?
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>
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>
<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
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
<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>