+ Start a Discussion
Anu Raj.ax1269Anu Raj.ax1269 

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>

 Thanks 

 AnuRaj

Best Answer chosen by Admin (Salesforce Developers) 
Anu Raj.ax1269Anu Raj.ax1269

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

All Answers

Subramani_SFDCSubramani_SFDC
Hi Arun,

You could refer this doc for PDF from Vf Page............
http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce..

otherwise use div tag above table...

If its not solved..can u post ur code here???
Shiva Ramesh @ xcdhrShiva Ramesh @ xcdhr

Hi Anu

 

Before CSS you need to give Dot like following

 

<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>

 

 

 

KodiKodi
Hi,
Try this type of way code it is a correct code for CSS style in table
<style>
table.all{
font-color:black;
font-size:14px;
font-family:Times New Roman;
}
table.all td{
font-color:black;
font-size:14px;
font-family:Times New Roman;
}
table.all tr{
---
}
</style>
<table class="all" width="100%">
</table>
Anu Raj.ax1269Anu Raj.ax1269

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

This was selected as the best answer