You need to sign in to do that
Don't have an account?
Color table columns on VisualForce page (rendered as PDF)
Dear all,
I have a VF page that contains a table. I would like to set the background color of the last column in the table. If I do not render it as PDF it works fine, but when I render it as PDF it does not change the bg color.
Do you have any ideas how to make it work?
<head>
<style>
body
{
font-family: Verdana;
font-size: 12px;
}
@page
{
size: landscape;
padding: 1px;
}
table tr td:last-child
{
background-color: red;
}
</style>
</head>
<table style = "width: 100%" border = "1">
<apex:repeat value="{!matrix}" var="r">
<tr>
<apex:repeat value="{!r}" var="c">
<td>{!c}</td>
</apex:repeat>
</tr>
</apex:repeat>
</table>
Thanks,
Hi,
When we render VF as PDF sometimes it not pickup your CSS which is working on normal VF page ...
Please add some code in your VF page.I have tried with apex:variable and now its working fine:
<head>
<style>
body
{
font-family: Verdana;
font-size: 12px;
}
@page
{
size: landscape;
padding: 1px;
}
</style>
</head>
<table style = "width: 100%" border = "1">
<apex:repeat value="{!matrix}" var="r">
<tr>
<apex:variable value="{!1}" var="column"/>
<apex:repeat value="{!r}" var="c">
<td style="background-color:{!(IF(column == r.size,'red',''))};">{!c}</td>
<apex:variable value="{!column+1}" var="column" />
</apex:repeat>
</tr>
</apex:repeat>
</table>
Please let me know if u have any problem on same, and if this post helps u please give KUDOS by click on star at left.
All Answers
Hello,
Try with: background-color: #F00
also you can try background: cmyk(0, 1,1,0.2);
Refer: http://www.antennahouse.com/CSSInfo/CSS-Page-Tutorial-en.pdf
Hi,
When we render VF as PDF sometimes it not pickup your CSS which is working on normal VF page ...
Please add some code in your VF page.I have tried with apex:variable and now its working fine:
<head>
<style>
body
{
font-family: Verdana;
font-size: 12px;
}
@page
{
size: landscape;
padding: 1px;
}
</style>
</head>
<table style = "width: 100%" border = "1">
<apex:repeat value="{!matrix}" var="r">
<tr>
<apex:variable value="{!1}" var="column"/>
<apex:repeat value="{!r}" var="c">
<td style="background-color:{!(IF(column == r.size,'red',''))};">{!c}</td>
<apex:variable value="{!column+1}" var="column" />
</apex:repeat>
</tr>
</apex:repeat>
</table>
Please let me know if u have any problem on same, and if this post helps u please give KUDOS by click on star at left.
Just 2 more questions:
1) The signed solution above colors the last column. What is the logic to color the last row as well?
2) PDF rendered version only shows red, blue, green, yellow, etc colors but when I set it to light grey it does not color anything. Any ideas? (it shows light gery when it is not PDF)
Thanks!
Hi,
1.) To color the last row,Use apex:variable:
<table style = "width: 100%" border = "1">
<apex:variable value="{!1}" var="row"/>
<apex:repeat value="{!matrix}" var="r">
<tr style="background-color:{!(IF(row== matrix.size,'red',''))};">
<apex:variable value="{!1}" var="column"/>
<apex:repeat value="{!r}" var="c">
<td style="background-color:{!(IF(column == r.size,'red',''))};">{!c}</td>
<apex:variable value="{!column+1}" var="column" />
</apex:repeat>
</tr>
<apex:variable value="{!row+1}" var="row" />
</apex:repeat>
</table>
2). I think it should be work for all color.Please specify the color code which u want to use.
I would like to use light grey.
I tried it as: light grey, light-grey, lightgrey
Thank you.
Hi,
You need to use color code for each color. please search in google for color code,As :#C0C0C0 for light grey
Please let me know if u have any problem on same,And give KUDOS by click on star at left.
Cool! Thanks a lot! :)
background-color:{!IF(mod(i,2)==0, 'red', 'blue')};