+ Start a Discussion
Camila HeitzCamila Heitz 

Splitting datatable in pdf onto separate pages

Hello,

I have my header and my footer showing on every page, but the pagination isn't right since my footer covers my content.
Any idea on what I can do?
Thank you!

Here's my code:
<apex:page controller="cnReportHoras" showHeader="false" standardStylesheets="false" renderAs="pdf">
   
    <apex:stylesheet value="{!URLFOR($Resource.Estatico, 'css/Style.css')}"/>
     <head>
    
    <link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,300" rel="stylesheet" type="text/css" />
   
     <style>
     @font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  src: local('Comfortaa Light'), local('Comfortaa-Light'), url(https://themes.googleusercontent.com/static/fonts/comfortaa/v5/r_tUZNl0G8xCoOmp_JkSCnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

    table {
    -fs-table-paginate: paginate;
    }
   
    table tr{
    page-break-inside:avoid;
}

#footer_container {
bottom:0;
left:0;
position:fixed;
width:100%;
}
        
#footer {
margin:0 auto;
}

   
#header-cont {
    width:100%;
    position:fixed;
    top:0px;
}

#header {
   
 
margin:0px auto;
}

@page{
    @bottom-left {                
    content: element(footer);    
    }
    @top-right {
    content: "Page " counter(page) " of " counter(pages);
   
    }
    @top-left-corner {
    content: element(header);
    }
   
    margin-top:2cm;
    margin-left:1.54cm;
    margin-right:1.54cm;
    margin-bottom:2cm;
}

div.footer {
display: block;
padding: 5px;
position: running(footer);
}

.pagenumber:before {
content: counter(page);
}

.pagecount:before {
content: counter(pages);
}
     </style>
     </head>
     
     <div id="header-cont">
    <div id="header">
    <img src="{!URLFOR($Resource.Estatico, 'img/s4gheader.png')}" width="100%"/>
    </div>
    </div>
    <div class="clear" style="height:30px;" />
    
   
    
   <body style="margin-top:200px; margin-bottom:60px; font-family: 'Comfortaa'">
  
    <table width="100%" class="tablaGral" >
        <tr>
            <td width="70%">
                <img src="{!URLFOR($Resource.Estatico, 'img/s4g-status.png')}" width="100%" />
             </td>
            
             <td width="30%">
            
               <table class="tableC">
                  <tr>
                       <td>HORAS CONTRATADAS:  </td>
                       <td>{!proyectos[0].horasEstimadas} hrs.</td>
                  </tr>
                  <tr>
                       <td style="vertical-align:middle;">CONSUMO: </td>
                       <td>
                       <apex:image id="activo" value="{!URLFOR($Resource.Estatico, 'img/render1.png')}" width="60" rendered="{!if(proyectos[0].percConsumido<100,true,false)}" />
                       <apex:image id="agotado" value="{!URLFOR($Resource.Estatico, 'img/render2.png')}" width="60" rendered="{!if(proyectos[0].percConsumido>=100,true,false)}" />                      
                      </td>
                  </tr>
                  <tr>
                       <td>TODAVIA QUEDAN: </td>
                       <td>{!proyectos[0].horasRestantes} hrs.</td>
                  </tr>
               </table>
              
             </td>
         </tr>
        
         <tr>
             <td width="20%">
                 <table width="85%">
                     <tr>
                         <th>Cliente </th>
                         <th>Fecha inicio</th>
                         <th>Fecha cierre</th>
                     </tr>
                     <tr>
                     <td>{!proyectos[0].cliente}</td>
                     <td style="color:red;">
                         <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!proyectos[0].comienzoPlanificado}" />
                         </apex:outputText>
                     </td>
                     <td style="color:red;">
                         <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!proyectos[0].finPlanificado}" />
                         </apex:outputText>
                     </td>
                     </tr>
                 </table>
             </td>
             <td width="80%">
             </td>
         </tr>
        
        
     </table>
     
  
    <div class="clear" style="height:50px;"/>
    <div class="panel panel-vercasos" style="border: 1px solid; ">
  
 
       
         <apex:pageBlock title="Peticiones">
        <apex:pageBlockTable value="{!peticiones}" var="peticion" id="tablaPeticiones" styleClass="table" cellspacing="10" rowClasses="odd,even">
                <apex:column >
                        <apex:facet name="header">Petición</apex:facet>
                        <apex:outputField value="{!peticion.Id_Peticion__c}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Asunto</apex:facet>
                        <apex:outputField value="{!peticion.subject}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Horas</apex:facet>
                        <center><apex:outputField value="{!peticion.Horas_estimadas_peticion__c}" /></center>
                </apex:column>
                <apex:column >
                        <apex:facet name="header"><center>Estado</center></apex:facet>
                        <apex:outputField value="{!peticion.Estado_Peticion__c}" />
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Fecha Petición</apex:facet>
                        <center><apex:outputField value="{!peticion.Fecha_Estimada_Peticion__c}" /></center>
                </apex:column>
        </apex:pageBlockTable>
        </apex:pageBlock>
   
    <div class="clear" style="height:20px;" />
   
  
    </div>
   </body>
  
  
   <div id="footer_container">
    <div id="footer">
        <img src="{!URLFOR($Resource.Estatico, 'img/s4gfooter.png')}" width="100%" height="100%"  />
    </div>
    </div>

  
    
</apex:page>
Sonam_SFDCSonam_SFDC
Hi,

PLs check the following thread - this has a sample solution code wich could help you update yours in case these is something  missing:
https://developer.salesforce.com/forums?id=906F000000098sQIAQ
Camila HeitzCamila Heitz
Thank you!