4

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. PDF image VF page image

4
  • What is the version of your visualforce? Aug 29, 2013 at 9:24
  • What browser version? Aug 29, 2013 at 9:36
  • VF page is 28 and browser is firefox 23.0.1.
    – AnuRaj
    Aug 29, 2013 at 9:44
  • Try again with 27 Aug 29, 2013 at 10:39

1 Answer 1

3

Try removing the border-collapse from your css and update your table tag to be

<table width="700px" class= "gridtable" cellspacing="0">

I know that the pdf renderer has a few 'issues' with css rules and going back to the old ways sometimes works best... (Cellspacing attribute isn't html compliant btw.)

I have created many pdf VF pages and have never previously used the border-collapse; otherwise everything else looks ok to me.

1
  • cellpadding and cellspacing are indeed HTML4 valid attributes. HTML5 hasn't replaced 4 yet.
    – sfdcfox
    Sep 28, 2013 at 12:52

You must log in to answer this question.

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