1

I have VF page and a button, on click of the button vf page is rendered as pdf. The data is completely clean but I am facing problem with css of the pdf. I have created a table that displays some details in the pdf but the table is show with some grey border. Please tell me how to remove those borders. I have attached the screen shot for reference

I have tried different ways like border:0; / border-sytle:solid like this but still its not working

apex: dataTable value = "{!OrdreItemDetails}"
var = "orderItms"
align = "Center"
width = "100%"
id = "OrderData"
border = "1"
style = "border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Product / Service Description < /div></apex: facet >
    < apex: outputText value = "{!orderItms.Product_Name__c}"
style = "font-family:Calibri;font-size:15px;" / >
    < /apex:column> < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Quantity < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0}"
style = "font-family:Calibri;font-size:15px;" >
    < apex: param value = "{!orderItms.Quantity}" / >
    < /apex:outputText> < /div> < /apex:column> < Apex: Column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Unit Cost < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0.00}"
style = "font-family:Calibri;font-size:15px; text-align:right;" > {
        !currencyCode
    } < apex: param value = "{!orderItms.unitprice}" / >
    < /apex:outputText> < /div> < /apex:column> < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;text-align:right;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Amount < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0.00}"
style = "font-family:Calibri;font-size:15px; text-align:right;" > {
        !currencyCode
    } < apex: param value = "{!orderItms.Quantity*orderItms.unitprice}" / >
    < /apex:outputText> < /div> < /apex:column> < /apex:dataTable> < table width = "100%"
align = "center"
cellspacing = "0"
cellpadding = "0"
border = "0" >
    < th >
    < /th> < th >
    < table border = "1"
border - color = "black"
cellspacing = "0"
cellpadding = "0"
align = "right"
width = "36.4%"
border - style = "solid" >
    < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0" >
    < td border = "None"
width = "4%" > < br / > < /td> < td border = "None"
width = "52%" > < br / > < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "4%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > Sub Total: < /td> < td border = "None"
width = "52%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !subTotal
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > VAT: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !vatCharges
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > Credit Card Fee: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal; font-family:Calibri;font-size:15;" > {
    !currencyCode
} {
    !creditCardCharges
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > Total: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal; font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !grandTotal
} < /td> < /tr> < /table> < /th> < /table>

I have used the Inline css for this, I know this is not a good practice but due to lack of time I have to use it inline

Boder Issue

2
  • Please post your code, both the CSS and the VF. Without it, we're all just guessing.
    – crmprogdev
    Jun 17, 2015 at 16:53
  • updated code please check Jun 17, 2015 at 17:08

1 Answer 1

1

At the root of your problem is that if you look at the VF Developer's Guide under Best Practices for Rendering PDFs, you'll find this section:

Components to Use with Caution in a PDF

  • <apex:attribute>
  • <apex:column>
  • <apex:component>
  • <apex:componentBody>
  • <apex:dataTable>

You'll notice above that <apex:dataTable> is on the list which is one of the components that you're using. I recommend that you rewrite your page to use a regular HTML Table which should solve your problem.

3
  • I have done using HTML also the same problem I am facing Jun 17, 2015 at 17:46
  • Perhaps you'll want to post your HTML code then because dataTables are "iffy" at best and no one's going to want to spin their wheels trying to help you troubleshoot one for that reason alone.
    – crmprogdev
    Jun 17, 2015 at 17:49
  • I'd also recommend you use use a Style Sheet to define your styles rather than all of the inline styling. That may be part of your issue. You could be creating conflicting styling. All of your fonts appear to be the same, so there's no reason to repeat that if you just define it once for all Tables. Same with border styles.
    – crmprogdev
    Jun 17, 2015 at 17:57

You must log in to answer this question.

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