4

I have created a Pdf in which have a table which have border css. But the table border get display only when it is a VF page the CSS is not working when VF page is renderAs="pdf". I want it to be displayed as VF page. Does there any way to get the solution.

My CSS & VF page:

<style>
    pageBlockCss {
        border-collapse:collapse;
        border-width: 1px;
        border-color: #000000;
    }
    pageBlockCss tr {
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
    }
    pageBlockCss td {
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
    }
</style>
<table width="100%" class="pageBlockCss" >
    <tr>
        <td><b><apex:outputText value="Consultant Name" /></b></td>
        <td><b><apex:outputText value="Project" /></b> </td>
        <td><b><apex:outputText value="Consultant Role" /></b> </td>
        <td><b><apex:outputText value="Quantity" /></b> </td>
        <td><b><apex:outputText value="Charge Rate" /></b> </td>
        <td><b><apex:outputText value="Sub Total" /></b> </td>
        <td><b><apex:outputText value="Taxes" /></b> </td>
        <td><b><apex:outputText value="Total" /></b> </td>
    </tr>
        <apex:repeat value="{!invLI_Con}" var="con" >
            <tr>
  • Could you post a snippet of your code – Chris Duncombe Dec 4 '13 at 11:28
  • Could be way off here, but have you tried the one line 'Border:1px solid black' to replace the 3 lines of code? – Chris Duncombe Dec 4 '13 at 11:41
  • Also, have you tried different border thicknesses to determine whether the border just isn't being displayed, or isn't being displayed as you're specifying. I remember years ago having similar issues, but I don't recall what we did to fix it. – Nick Cook Dec 4 '13 at 11:50
7

With API 29. there are some changes how the PDF rendering engine works. Have a look at the below example

    <apex:page standardController="Account" standardStylesheets="false" applyHtmlTag="false" showHeader="false" renderAs="PDF">
    <head>
        <style type="text/CSS">
            body{
                font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;         
            }

            .center{
                text-align:center;
            }

            .table-bordered {
                border: 1px solid #000;
                border-collapse : collapse;
                font-size : .7em;
            }


           thead>tr>th {
                vertical-align: bottom;
                border: 1px solid #000;
                border-spacing: 0;
                text-align:center;
                border-collapse: collapse;
                background : #202d79;
                color:white;
            }

            td {
                vertical-align: bottom;
                border: 1px solid #000;
                border-spacing: 0;
                border-collapse: collapse;
                text-align:center;
            }

            .header>td{
                font-weight:bold;
                background : #c4c4c4;               
            }

            .echoArea>td{
                padding:10px;
            }

        </style>
    </head>
    <body>
        <p>
            <h3 class="center" style="text-decoration:underline">My Contacts</h3>
        </p>


        <table width="100%" class="table-bordered">
            <thead>
                <tr>
                    <th> Name</th>
                    <th>First Name</th>

                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!Account.Contacts}" var="con">

                        <tr>
                            <td>{!con.Name}</td>
                            <td>{!con.FirstName}</td>

                        </tr>

                </apex:repeat>
            </tbody>
        </table>

    </body>
</apex:page>

Please make sure you are setting applyHtmlTag="false"

Here is a screenshot enter image description here

  • Could you please explain a bit more about new PDF render changes? – Sergej Utko Dec 4 '13 at 12:11
  • hai thanks, but this i have tried it before, but it was not working with renderAs="pdf". – AnuRaj Dec 4 '13 at 12:20
  • Can you try this in your org ? This code should work! I have also updated the answer to include the screenshot of the same from my developer org. I know I overdid the css a bit :P you can always remove them. – Avidev9 Dec 4 '13 at 12:28
  • @mast0r I read the same somewhere in the blog. I dont have the link handy I will post you the same once I have them – Avidev9 Dec 4 '13 at 12:29
  • @mast0r Take a look at mohit's answer answer salesforce.stackexchange.com/questions/13123/… – Prady Dec 4 '13 at 12:33
0

I solved it. The issue was CSS shoud be inside <head> </head> tag.

  • Man, @Avidev9's code has <head> and </head> tags. – Andrii Muzychuk Jul 31 '16 at 10:33

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.