function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
erikdozsaerikdozsa 

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,

Best Answer chosen by Admin (Salesforce Developers) 
Puja_mfsiPuja_mfsi

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

Vinita_SFDCVinita_SFDC

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
Puja_mfsiPuja_mfsi

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.

This was selected as the best answer
erikdozsaerikdozsa

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!
Puja_mfsiPuja_mfsi

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.

 
erikdozsaerikdozsa

I would like to use light grey.

I tried it as: light grey, light-grey, lightgrey

 

Thank you.
Puja_mfsiPuja_mfsi

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.
erikdozsaerikdozsa

Cool! Thanks a lot! :)
Mitesh SuraMitesh Sura
Thank you Puja. You saved my day. I have a question though, why did you use matrix.size instead of "mod" function ??

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