I am trying to create a invoice. In this invoice i have used css to draw a single line for table. But the the single line table is visible on Vf page but when we renderAs="pdf" the page. The Line disappear, I am not able to understand what is going wrong. My code:
<apex:page controller="ctrl_pdfInvoice" renderAs="pdf">
<head>
<style>
.gridtable {
font-family: "Verdana";
//font-size:10px;
color:#333333;
border-width: 1px;
border-color: #000000;
border-collapse: collapse;
}
.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #000000;
// font-weight:bold;
}
.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #000000;
background-color: #ffffff;
}
.invoiceTable{
font-family: "Verdana";
//font-size:10px;
color:#333333;
border-width: 1px;
border-color: #000000;
border-collapse: collapse;
}
.invoiceTable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #000000;
}
.invoiceTable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #000000;
background-color: #ffffff;
}
.invoiceTable td.total {
padding: 8px;
border-style: none;
border-left-width:0px;
border-color: #000000;
background-color: #ffffff;
}
.invoiceTable td.firstrow{
padding: 8px;
border-style: solid;
border-bottom-style:none;
border-color: #000000;
background-color: #ffffff;
}
.header {
font-family : Verdana;
font-weight : bold;
font-size :16pt;
}
</style>
</head>
<table width="700px" class= "gridtable">
<tr >
<td >
<b><apex:outputLabel value="Client Billing Address:"></apex:outputLabel></b><br/>
<apex:outputField value="{!invCrdNote.Client__r.ShippingStreet}"/> ,
<apex:outputField value="{!invCrdNote.Client__r.ShippingCity}"/>,
<apex:outputField value="{!invCrdNote.Client__r.ShippingState}"/>,<br/>
<apex:outputField value="{!invCrdNote.Client__r.ShippingPostalCode}"/>,
<apex:outputField value="{!invCrdNote.Client__r.ShippingCountry}"/>
</td>
<td >
<b><apex:outputLabel value="Client Purchase Order : "></apex:outputLabel></b>
<apex:outputField value="{!invCrdNote.Project__r.PO_Number__c}"/> <br/>
<b><apex:outputLabel value="Client Project : "></apex:outputLabel></b>
<apex:outputField value="{!invCrdNote.Project__r.name}"/>
</td>
<td >
<apex:outputField value="{!invCrdNote.Invoice_Date__c}"/>
</td>
</tr>
</table>
I am also attaching the images of the VF page and pdf page.