+ Start a Discussion

Extra whitespace in table header when rendered as a PDF

Have opened a case with Salesforce on this issue but thought I'd reach out to the dev community to see if anyone has any ideas.

Basically the issue occurs when you render a table with a repeating header as a PDF. On the first page the header will be rendered with extra whitespace above. On subsequent pages the header is fine, though in the sample code below that demonstrates the issue I have a border around the table and the top of the border is missing on all pages save the first.

A similar issue occurs with a repeating footer, though in this case the extra whitespace gets added below the footer. The sample code below does not show this behaviour.

One odd thing I've noticed is that if there is sufficient content before the table on the same page the table renders as expected (both first page and all subsequent pages). This can be observed by including the outputPanel in the sample code below.

<apex:page controller="TestPDFController" standardStylesheets="false" showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" renderAs="pdf" readOnly="true">
        <style type="text/css">
            @page {
                size: letter portrait;
                margin-top: 1.0in;
                margin-bottom: 1.0in;
                margin-left: 1.0in;
                margin-right: 1.0in;
                counter-increment: page;
                @bottom-right {
                    content: "Page " counter(page)
            body {
                font-family: Arial, sans-serif;
                color: #000;
            .dataTableClass {
                -fs-table-paginate: paginate;
                 border: 1px solid black; 
                 width: 100%;
            .dataTableClass th, .dataTableClass td {
                vertical-align: top;
                text-align: left;
            .dataTableClass .dtColHeader {
                font-size: 9pt;
                font-weight: bold;
            .dataTableClass .dtColData {
                font-size: 9pt;
        <apex:outputPanel layout="block" rendered="false">
            <h3>By including these lines the table header...</h3>
            <h3>...renders as expected on all pages</h3>
        <apex:dataTable value="{!accounts}" var="rec" styleClass="dataTableClass" >
            <apex:facet name="header">
                <h3 style="text-align: center;">List of Accounts and Owners</h3>
            <apex:column style="width: 60%;">
                <apex:facet name="header">
                    <apex:outputText value="Account Name" styleClass="dtColHeader" />
                <apex:outputText value="{!rec.Name}" styleClass="dtColData"/>
            <apex:column style="width: 40%;">
                <apex:facet name="header">
                    <apex:outputText value="Owner Name" styleClass="dtColHeader" />
                <apex:outputText value="{!rec.Owner.Name}" styleClass="dtColData" />

public class TestPDFController
    public Account[] accounts{get; private set;}

    public TestPDFController()
    private void init()
        this.accounts = [SELECT Id, Name, Owner.Name FROM Account ORDER BY Name LIMIT 100];
Mike @ BlackTabMike @ BlackTab
Same thing happened to me when building a VF page and rendering it as a CSV. It created another row above my row of columns and couldn't figure out how to get rid of it. 
Matt WhalleyMatt Whalley
I too am seeing the same thing, it would appear as if 5px padding is being applied from the first header to the main body.  Makes things look rather rookie-like.
Same issue for me too. Did you ever find a solution for this problem?
For anyone facing this problem, I got rid of this issue after removing child tags inside <th>

All th tags under a table with -fs-table-paginate:paginate should not contain any child tags.