[SalesForce] Table Breaking in Pdf format

I am rendering my page as a pdf but when the data gets larger my table's format is breaking. I want a closing line in each page of my pdf whether the data is large or going to next page.
Can Someone help me out?

<apex:page standardController="Case" extensions="TimeEntryList" showHeader="false" sidebar="false" applyBodyTag="false" docType="html-5.0" >

$(function () {
$( "#myLocalStartDate" ).datepicker({dateFormat: 'yy-mm-dd'});
$( "#myLocalEndDate" ).datepicker({dateFormat: 'yy-mm-dd'});

});

<head>

    <style type="text/css" media="print">
        @page {
            size: A4 landscape;

            @bottom-right {
            content: "Page " counter(page) " - " counter(pages);
            font-family: 'Arial', 'Helvetica', sans-serif;
            font-size:10px;

            }

        }




    </style>
</head>



    <apex:form >

    <apex:pageMessages ></apex:pageMessages>



    <b style="padding-left: 42px;">Start Date</b>
     <input type='text' id="myLocalStartDate" class="form-control" placeholder="StartDate(yyyy-mm-dd)" onchange="callActionStart(this.value);"/>



    <b style="padding-left: 50px;">End Date </b> 
     <input type='text' id="myLocalEndDate" class="form-control" placeholder="EndDate(yyyy-mm-dd)" onchange="callActionEnd(this.value);"/>


        <apex:commandlink value="Generate PDF" action="{!exportAsPdf}" target="_blank" styleclass="button" style="margin-right: 25px;font-size: 16px;display: inline-block;text-decoration: none;border-radius: 10px;text-align: center;padding: 15px 32px;color: white;border: none;background: rgba(175, 140, 76, 0.92) !important;margin-bottom: 10px;float:right;"/>
        <apex:commandbutton value="View Records" action="{!Records}" style="margin-left:60px;margin-top: 10px;border-radius: 6px;padding: 9px 12px;margin-top: 10px;font-size: 10px;text-decoration: none;text-align: center;color: white;border: none;background: rgba(175, 140, 76, 0.92) !important;">

         <apex:actionFunction name="callActionStart" rerender="none">
             <apex:param name="startId" value="StartDate" assignTo="{!myLocalStartDate}"  /> 

         </apex:actionFunction>

         <apex:actionFunction name="callActionEnd" rerender="none">
             <apex:param name="EndId" value="EndDate" assignTo="{!myLocalEndDate}"  /> 

         </apex:actionFunction>

          </apex:commandbutton>
            <apex:repeat value="{!accmap}" var="accm" rendered="{!boo}"  >
            <div style="page-break-after: always" class="page-break">

                <div style="padding-top: 25px;font-size: 16px;">
                  <b style="background-color: antiquewhite;">  {!accmap[accm]} (Total Records : {!accsize[accm]}) </b>
               </div><br></br><br></br>
                <table width="100%" border="1" cellspacing="0" cellpadding="5" class="print-friendly">

                    <THEAD> 
                        <tr>
                            <td class="tableHeader"><b>Time Entry Name</b></td>      
                            <td class="tableHeader"><b>Time Entry Date</b></td>
                            <td class="tableHeader"><b>CreatedBy</b></td>
                            <td class="tableHeader"><b>WorkType</b></td>
                            <td class="tableHeader"><b>Total Time</b></td>
                            <td class="tableHeader"><b>Billable Amount</b></td>
                            <td class="tableHeader "><b>Summary Notes</b></td>
                            <td class="tableHeader"><b>Approved</b></td>
                        </tr>
                    </THEAD>
                    <TBODY>
                        <apex:repeat value="{!accidmap[accm]}" var="item" rendered="{!boo}">
                            <tr>
                                <td class="tableContent">{!item.Name}</td>
                                <td class="tableContent">
                                <apex:outputText value="{!item.Time_Entry_Date__c}"></apex:outputText>
                                </td>
                                <td class="tableContent">{!item.CreatedBy.Name}</td>
                                <td class="tableContent">{!item.Worktype__c}</td>
                                <td class="tableContent">{!item.Total_Time__c}</td>
                                <td class="tableContent">{!item.Billable_Amount__c}</td>
                                <td class="tableContent summary-notes">{!item.Time_Entry_Summary__c}</td> 
                                <td class="tableContent">{!item.Approved__c}</td>
                            </tr>
                        </apex:repeat>

                </TBODY>

            </table>
        </div>          
    </apex:repeat>
</apex:form>

My pdf page looks like..

Best Answer

Please try this in your CSS,

page-break-after:always

Source: https://developer.salesforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce

Related Topic