[SalesForce] Not able to get the css working for table

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>

Best Answer

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

Related Topic