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
4
  • What is the version of your visualforce?
    – Mohith Shrivastava
    Aug 29, 2013 at 9:24
  • What browser version?
    – Sergej Utko
    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
    – Sergej Utko
    Aug 29, 2013 at 10:39

1 Answer 1

Reset to default
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
1
  • cellpadding and cellspacing are indeed HTML4 valid attributes. HTML5 hasn't replaced 4 yet.
    – sfdcfox
    Sep 28, 2013 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.