My issue is table content overlap in second page please guide me to increase header height
========================== My issue is table content overlap in second page please guide me to increase header height
==========================
<apex:page StandardController="Estimate__c" renderAs="pdf" applyBodyTag="false" extensions="EstimatePDFController">
<head>
<style type="text/css" media="print">
@page {
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
text-align: unset;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
@page :first {
@bottom-left {
/* Nothing */
}
@top-center {}
}
#box {
width: 749px;
height: 945px;
align: center;
}
#box img {
position: absolute;
width: 100%;
height: 100%;
}
#box div {
position: absolute;
width: 100%;
height: 100%;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<div class="header" style="padding-bottom:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<span style="text-align:left!important;">
<apex:image url="{!$Resource.MavenLOGO}" width="110" height="30" />
</span>
</td>
<td style="text-align:right;">
<span style="font-family: Montserrat, sans-serif;text-align:right;"> Estimate Number: {!Estimate.Name} | V - {!Estimate.Revision__c} </span>
</td>
</tr>
</table>
</div>
<div class="footer">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="">
<tr>
<td width="10%">Page: <span style="font-family: Montserrat, sans-serif;" class="pagenumber" /></td>
</tr>
</table>
</div>
<div id="box">
<div style="page-break-after: always;" />
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: Montserrat, sans-serif!important;">
<tr>
<td height="30" colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<h1 style="font-family: Montserrat, sans-serif; color:#fff; font-size:20px;text-align:left;background-color: #f39c12;padding: 10px 10px 10px 30px;width:50%;">SCOPE OF WORK</h1>
</td>
</tr>
<tr>
<td height="15" colspan="2"></td>
</tr>
<tr>
<td height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<apex:variable value="{!0}" var="rowNum" />
<tr>
<td width="5%" height="28" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px;border: 1px solid #ccc;background-color:#0f1c43">
<strong style="padding-left:5px; color:#fff;">#</strong>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
<strong style="padding-left:5px;color:#fff;">Document / Activity </strong>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
<strong style="padding-left:5px;color:#fff;">Responsibility</strong>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
<strong style="padding-left:5px;color:#fff;">Responsibility of Manufacturer </strong>
</td>
</tr>
<apex:variable var="s_no" value="{!1}" />
<apex:repeat value="{!ScopeofWork}" var="sow1">
<apex:repeat value="{!ScopeofWork}" var="sow">
<apex:outputPanel rendered="{!sow.SR_No__c== s_no}" layout="none">
<tr>
<td width="5%" height="28" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
<span style="padding-left:5px;"> {!sow.SR_No__c} </span>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
<table>
<tr>
<td style="padding-left:5px;">
<strong style="color: #535353;">
<apex:outputField value="{!sow.Name}" />
</strong>
</td>
</tr>
</table>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
<span style="padding-left:5px;">
<apex:outputField value="{!sow.Responsibility_of_Maven__c}" />
</span>
</td>
<td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
<table>
<tr>
<td style="padding-left:5px;">
<span>
<apex:outputField value="{!sow.Responsibility_of_Manufacturer__c}" />
</span>
</td>
</tr>
</table>
</td>
</tr>
</apex:outputPanel>
</apex:repeat>
<apex:variable var="s_no" value="{!s_no+1}" />
</apex:repeat>
</table>
</td>
</tr>
<div style="page-break-after: always;" />
</table>
</div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>
page-breakin your css.