Target: To give margin of upto 8cm to a dynamically generated pdf, which has repeated header and footer on every page.
Current issue: Although I am able to give margin to the pdf and the content gets properly aligned on the first page, but from the second page onwards the content of the body starts to overlap with the header of the page,
Page 2 and beyond - ISSUE
How it SHOULD LOOK LIKE
What I tried: Tried the solution in related questions like :- Content overlapping with header on second page of PDF and Table headers overlapping on second page when printing/PDF and other ones too, but none of them seem to be working.
Code:-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>Document</title>
<style>
/* Styles go here */
@media print {
* {
-webkit-print-color-adjust: exact !important;
}
}
* {
font-family: "Mulish", sans-serif;
}
.section-padding {
padding-bottom: 20px;
}
.table > :not(:last-child) > :last-child > * {
border-bottom-color: inherit;
}
strong {
font-weight: 700 !important;
}
.page-header,
.page-header-space {
height: 250px;
}
.page-footer,
.page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
}
.page {
page-break-after: always;
}
@page {
margin: 5cm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
body {
margin: 0;
}
table {
page-break-inside: auto;
}
tr,
div {
page-break-inside: avoid;
page-break-after: auto;
}
}
</style>
</head>
<body>
<div class="page-header">
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
</div>
<div class="page-footer">
Footer
</div>
<table style="padding: 0; margin: 0; width: 100%;">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="page" style="color: green; font-weight: bold;">
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"
></script>
</body>
</html>PS: The issue would be reproducible only if the margin exceeds the value of 1.5cm, also if any other third party tool or any other way is possible to achieve the target please feel free to share.
Thank you!