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

|improve this question
  • What is the version of your visualforce? – Mohith Shrivastava Aug 29 '13 at 9:24
  • What browser version? – Sergej Utko Aug 29 '13 at 9:36
  • VF page is 28 and browser is firefox 23.0.1. – AnuRaj Aug 29 '13 at 9:44
  • Try again with 27 – Sergej Utko Aug 29 '13 at 10:39
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.

|improve this answer
  • cellpadding and cellspacing are indeed HTML4 valid attributes. HTML5 hasn't replaced 4 yet. – sfdcfox Sep 28 '13 at 12:52

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.