function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Cory CowgillCory Cowgill 

Another PDF Styling Question - Borders

I have the typical problem with styling a table in a visualforce page rendered as a PDF.

 

I am losing the border completely. I know the renderas="PDF" attribute in <apex:page> tag has some limitiations when it converts into PDF, especially Fonts losing some of their styling.

 

My question is this: has anyone found a way to get table styling working in PDF mode for a VF page?

 

Ideally, I should be able to modify my CSS below to work in the PDF mode. As usual, any suggestions are appreciated. Below is what I'm losing in the PDF.

 

    table.rankings {
        border-width: 1px;
        border-spacing: 0px;
        border-style: solid;
        border-color: black;
        border-collapse: collapse;
        background-color: white;
    }
    table.rankings th {
        border-width: 1px;
        padding: 3px;
        border-style: inset;
        border-color: gray;
        background-color: white;
        -moz-border-radius: 0px 0px 0px 0px;
    }
    table.rankings td {
        border-width: 1px;
        border-style: inset;
        border-color: gray;
        background-color: white;
        -moz-border-radius: 0px 0px 0px 0px;
    }

Best Answer chosen by Admin (Salesforce Developers) 
Cory CowgillCory Cowgill

This has already been solved in other posts.

 

The solution is to ensure that your CSS stytle tag is included in the <Head> tag. PDF Rendering needs the Styles to be inside the <head> tag so it can render it properly.

All Answers

Cory CowgillCory Cowgill

I may have found another post with the solution. I'll try the solution and mark this as resolved if so.....

Cory CowgillCory Cowgill

This has already been solved in other posts.

 

The solution is to ensure that your CSS stytle tag is included in the <Head> tag. PDF Rendering needs the Styles to be inside the <head> tag so it can render it properly.

This was selected as the best answer