Visualforce PDF Table Cells and Mysterious Disappearing Borders

One of the coolest features of Visualforce (in my opinion) is the ability to render your page as a PDF. This has numerous use cases (including creating custom Visualforce Quotes), but the one that I see the most is trying to surface a bunch of custom data on a one sheet page for printing and/or emailing to customers.

One of the issues I’ve run into quite a bit is that the PDF output for table cells just doesn’t look right. You can see below what my HTML table looks like:

And then you can see, based on what you think is valid HTML/CSS, what its PDF rendering looks like.

As you can see, some of the cell borders seem to be missing, although it seems to be in random locations. However, it isn’t truly random, as you are able to reload the page and see the same visual artifacts.

Developer Tip

When debugging PDF markup, set your renderAs attribute on the to {!$CurrentPage.parameters.renderAs} and then add renderAs=pdf as a parameter in your URL. It will let you quickly remove that parameter to switch back and forth between HTML and PDF modes (since you can’t take advantage of browser based developer tools with the PDF version to check CSS style changes).

Strangely enough, if you zoom into the PDF enough, the lines start to appear. After unsuccessfully poking around Salesforce’s StackExchange site, I started to think about the issue a bit and came up with the hypothesis that the PDF rendering must interpret the content of my cells being bigger than the HTML version. To test out that theory, I updated the CSS to include the following:

td { padding: 1px; }

Fortunately, this appears to have solved the issue. I actually stepped through 0px to 1px in .1px increments to see the changes as different parts of the table started to show the borders again.