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>
