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.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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>
Method 2
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:
Method 3
@Mitesh Sura
add padding:1px to your style. This should resolve your issue.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0