+ Start a Discussion
gail.hallettgail.hallett 

Borders in visualforce pdf page are different thicknesses.

Here is my page header:
<apex:page standardController="Pro_Sale__c" cache="false" standardStylesheets="true" showHeader="false" applyBodyTag="false" renderAs="pdf">

Here is the part of my style that controls borders:
        table.gridtable {
            border-collapse: collapse;
            border: 0px;

         }

        th {
            border: 1px solid #000;
            padding: 3px;
            border-collapse : collapse;
            border-spacing: 0;

         }
         
        td {
            border: 1px solid #000;
            padding: 3px;
            border-collapse : collapse;
            border-spacing: 0;
         }
        

When I render as html, it looks fine, with all borders as 1px. However, when I render as pdf, some lines are double thickness (and there is no rhyme or reason why some are and some aren't, though the double thickness seem to be around th more than td). I've tried with standardstylesheets="true" and "false" and still get the same results.
kaustav goswamikaustav goswami
Can you please try 

th{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
.......
.........
}

Thanks,
Kaustav
gail.hallettgail.hallett
Unfortunately that doesn't work. It's not just the bottom border of the headers that have this issue. I've got some right borders that are double thick but not all. Also, when rendering as html, I don't get this result at all. 
Jonathon JurischJonathon Jurisch
Same thing happens when trying divs formatted as tables. =(
<style type="text/css">
            .table { display: table; width:100%; border:1px solid black; margin-top:.25in;}
	    .row { display: table-row; }
	    .cell { display: table-cell; border-top:1px solid black;}
</style>

 <div class="table">
            <div class="row">
                <div class="cell">xxx</div>
                <div class="cell">xxx</div>
            </div>
            <div class="row">
                <div class="cell">xxx</div>
                <div class="cell">xxx</div>
            </div>
            <div class="row">
                <div class="cell">xxx</div>
                <div class="cell">xxx</div>
            </div>
            <div class="row">
                <div class="cell">xxx</div>
                <div class="cell">xxx</div>
            </div>
</div>
screen shot of double thick border lines
 
Jonathon JurischJonathon Jurisch
This only appears to be something I notice in the browser preview version at certain zoom levels. When downloading the .pdf file and opening natively, all of the borders are consistent. Also, if you zoom in on the browser version, the borders become more consistent. So I'm guessing this may be something to do with the rendering in browser plug-in. 

borders in downloaded PDF

 
Tom LinTom Lin
Was this ever solved ?
Nathan SNathan S
I agree with Jonathon that it's some issue between Apex PDF rendering and an inline browser PDF viewer (Chrome in my case).  I don't think you need to do anything if a file and Adobe Reader is the ultimate destination of your PDF.  But for users looking at your page with inline PDF, it looks bad at the standard level (try control-zero to reset zoom in Chrome) but looks totally fine with one more level of zoom (control-=).  Except only we know that.

I found a blog post (http://blog.adityanaag.com/26/Styling+Visualforce+PDFs) which has good info on Apex PDF table design, and it inspired me to add a couple of tags.  It looked better but was too thick.  For fun I tried a half pixel which actually worked, but it's bad practice.  In the end, if you use em instead of pixels, and get a measurement you like, you can make the lines look consistent in the Chrome default browser.  .02em may not work for you since em is relative to font size, but here's what worked for me:
 
<style type="text/css">
  table { border-collapse:collapse;
          border: .02em solid black;
        }

  td, th { border: .02em solid black;
         }
</style>
BEFORE: Chrome rendering table with 1px border with inline browser:
table using 1px border

AFTER: Chrome rendering table with .02em border with inline browser:
User-added image