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.

  • 3
    use head tag before the style tag . – Mohith Shrivastava Jun 4 '13 at 10:31
  • 1
    you were right... it was non usage of head tags was the cause – Prady Jun 4 '13 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 '13 at 13:27
  • Thats great tip @crmprogdev – Prady Jun 5 '13 at 6:40
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.