renderas=pdf not generating borders in html tables

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>

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


@Mitesh Sura

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

Tags:

Pdf

Visualforce

Recent Posts