7

I have a Vf page which i am generating as pdf using renderas="pdf".

The issue i am facing is that the html tables i am using in the Vf page dont seem to show the borders. They are visible when i view it as a normal Vf page. But once i render as pdf the styles vanish.

<apex:page standardController="Invoice__c" extensions="PageControllera" showheader="false" sidebar="false" renderAs="pdf" >
<style>
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    font-weight:bold;

}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>     
<table  Id="header" style="width: 100%; " border ="1">     
    <tr>
        <td style="width: 50%"><apex:image value="{!URLFOR($Resource.Logo)}"/><br/><br/>

        </td>               
        <td style="width: 50%;"   >
        <table Class = "gridtable" > // This table does not display borders
            <tr>
                <th>Date</th>
                <th>Invoice #</th>
            </tr>
            <tr>
                <td> <apex:outputText value="{0,date,MM/dd/yyyy}" >
                 <apex:param value="{!DATEVALUE(text(theInvoice.Actual_Date__c))}"/>    
            </apex:outputText></td>
                <td><apex:outputText value="{!theInvoice.Name}" /></td>
            </tr>
        </table><br/>
        <table Class = "gridtable" cellpadding="1" cellspacing = "1" >
            <tr >
                <th>P.O. No. </th>
                <th>Terms</th>
                <th>Project</th>
            </tr>
            <tr>
                <td> </td>
                <td>Net 60</td>
                <td></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr >
        <td >
            <table Class = "gridtable" cellpadding="2" cellspacing = "2">
            <tr>

                <th>Bill To</th>
            </tr>
            <tr> 
                <td> <apex:outputText value="{!theInvoice.Account_Name__r.Name}" /> <br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingStreet}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingCity}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingState}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingCountry}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingPostalCode}" />
                </td>

            </tr>
        </table>
        </td>
        <td > </td>
    </tr> 
</table>
</apex:page>

Is there something i am missing? I dont think its picking any of the styles.

4
  • 3
    use head tag before the style tag . Jun 4, 2013 at 10:31
  • 1
    you were right... it was non usage of head tags was the cause
    – Prady
    Jun 4, 2013 at 11:18
  • 1
    Be sure to always put in an <apex:messages /> tag in your code just above the <head> tag as well! Any time there's an error, your output can get really wonky and if your don't see the error message, you may find yourself chasing down HTML problems that don't exist!
    – crmprogdev
    Jun 4, 2013 at 13:27
  • Thats great tip @crmprogdev
    – Prady
    Jun 5, 2013 at 6:40

3 Answers 3

9

The solution for this is to wrap the style tag in head tag.

Include tag before tag

    <apex:page standardController="Invoice__c" extensions="PageControllera"     showheader="false" sidebar="false" renderAs="pdf" >

    <head>

     <style>
        table.gridtable {
       font-family: verdana,arial,sans-serif;
       font-size:11px;
        color:#333333;
        border-width: 1px;
         border-color: #666666;
     }
        table.gridtable th {
         border-width: 1px;
       padding: 8px;
       border-style: solid;
       border-color: #666666;
      font-weight:bold;

     }
    table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
     }
     </style> 
     </head>    
        <table  Id="header" style="width: 100%; " border ="1">     
         <tr>
        <td style="width: 50%"><apex:image value="{!URLFOR($Resource.Logo)}"/><br/><br/>

        </td>               
        <td style="width: 50%;"   >
        <table Class = "gridtable" > // This table does not display borders
            <tr>
                <th>Date</th>
                <th>Invoice #</th>
            </tr>
            <tr>
                <td> <apex:outputText value="{0,date,MM/dd/yyyy}" >
                 <apex:param value="{!DATEVALUE(text(theInvoice.Actual_Date__c))}"/>    
            </apex:outputText></td>
                <td><apex:outputText value="{!theInvoice.Name}" /></td>
            </tr>
        </table><br/>
        <table Class = "gridtable" cellpadding="1" cellspacing = "1" >
            <tr >
                <th>P.O. No. </th>
                <th>Terms</th>
                <th>Project</th>
            </tr>
            <tr>
                <td> </td>
                <td>Net 60</td>
                <td></td>
            </tr>
        </table>
        </td>
    </tr>
    <tr >
           <td >
             <table Class = "gridtable" cellpadding="2" cellspacing = "2">
            <tr>

                <th>Bill To</th>
            </tr>
            <tr> 
                  <td> <apex:outputText value="{!theInvoice.Account_Name__r.Name}" />   <br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingStreet}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingCity}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingState}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingCountry}" /><br/>
                    <apex:outputText value="{!theInvoice.Account_Name__r.BillingPostalCode}" />
                </td>

            </tr>
        </table>
        </td>
        <td > </td>
    </tr> 
</table>
</apex:page>
3

This works for me very well. As @MohithKumar has already said you need to wrap your <style> ...</style> with a <head>...</head> tag:

<apex:page showheader="false" sidebar="false" renderAs="pdf">

    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style>
    .redLine {
        border-bottom: 2px solid #CB5D5D;
    }
    </style>
    </head>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" class="redLine">Hello World</td>
        </tr>
</table>

</apex:page>

Result:

enter image description here

2

@Mitesh Sura

add padding:1px to your style. This should resolve your issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .