My pdf page have more than 3 pages.Every page have fixed header and footer in page. In every page, table have broken in bottom of the page.

So i have used page-break-inside: avoid; for avoiding broken table.

This time table will goto next page. It have merged with header image. How to avoid this merging table with headers?

I have attached my error image for your reference.

My css code:

<style type="text/css" media="print">

@page {

@top-center {

content: element(header);

}

@bottom-left {

content: element(footer);

}

}

 

div.header {

padding: 2px;

position: running(header);

}

div.footer {

display: block;

padding: 5px;

position: running(footer);

}

.avoidBreak {

   float:none !important;

   page-break-inside: avoid;

 }

</style>

My html table code:

 <table width="100%" class = "avoidBreak">

<tr style="min-height:25px;font-weight:Bold;font-size:12px;font-family:calibri;">

<td colspan="2" style="border:1px dashed silver;Text-align:center;">

<u>Unexpected Items </u>

</td>

</tr>

<tr style="min-height:25px;font-weight:Bold;font-size:12px;font-family:calibri;">

<td style="border:1px dashed silver;Text-align:center;" bgcolor="#D3D3D3">

<apex:outputText value="Type of Item"></apex:outputText>    

</td>

<td style="border:1px dashed silver;Text-align:center;" bgcolor="#D3D3D3">

<apex:outputText value="Quantity"></apex:outputText>    

</td>

</tr>

<tr style="min-height:25px;">

<td style="border:1px dashed silver;Text-align:center;" >

</td>

<td style="border:1px dashed silver;Text-align:center;" >

</td>

</tr>

<tr style="min-height:25px;">

<td style="border:1px dashed silver;Text-align:center;" >

</td>

<td style="border:1px dashed silver;Text-align:center;" >

</td>

</tr>

</table>