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>
Improve this question
3
  • Could you post a snippet of your code
    – Chris Duncombe
    Commented Dec 4, 2013 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
    Commented Dec 4, 2013 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 C
    Commented Dec 4, 2013 at 11:50

2 Answers 2

Reset to default
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

Improve this answer
5
  • Could you please explain a bit more about new PDF render changes?
    – Sergej Utko
    Commented Dec 4, 2013 at 12:11
  • hai thanks, but this i have tried it before, but it was not working with renderAs="pdf".
    – AnuRaj
    Commented Dec 4, 2013 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
    Commented Dec 4, 2013 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
    Commented Dec 4, 2013 at 12:29
  • @mast0r Take a look at mohit's answer answer salesforce.stackexchange.com/questions/13123/…
    – Prady
    Commented Dec 4, 2013 at 12:33
0

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

Improve this answer
1
  • Man, @Avidev9's code has <head> and </head> tags.
    – Andrii Muzychuk
    Commented Jul 31, 2016 at 10:33

You must log in to answer this question.

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