I have this code which I want to use pagebreak when the data in the first page is overlap in must goes to the next page since the size of my container-body3 paper is A4 and I tried dynamically but it didn’t work until, can someone help me with this? Im out of option
function printForms() {
window.print();
}<style>
.container-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: auto;
padding-bottom: 50px;
background-color: #cccccc;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 5%;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
padding: 0 10px;
}
.print-button {
background-color: #b2c2ce;
color: white;
border: none;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
margin-right: 500px;
}
.container-body3 {
width: 210mm;
height:297mm;
background-color: #ffffff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
padding: 20px;
position: relative;
padding: 50px;
}
.appendix {
position: absolute;
top: 65px;
right: 50px;
font-size: 14px;
font-style: italic;
}
table {
border: 3px solid;
border-collapse: collapse;
width: 100%;
margin-top: 40px;
}
th,
td {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.center-text {
text-align: center;
vertical-align: top;
}
.dvnumber {
background-color:#c6e0b4;
border:1.8px solid;
font-size: 15px;
}
.coloredrow {
background-color: rgb(158, 198, 255);
-webkit-print-color-adjust: exact;
}
.align-u-left {
text-align: left;
vertical-align: top;
}
table.myClass * { /*new*/
border: 0;
}
@media print {
.container {
display: none;
}
.container-body3 {
page-break-inside: auto;
margin: 0;
}
.page-break {
page-break-before: always;
}
.header {
margin-top: 0; /* Default margin for the header */
}
@page {
margin: 10mm; /* Default margin for the whole page */
}
.header.large-margin {
margin-top: 50mm; /* Adjust this value as needed */
}
.page-start-5 ~ .header {
margin-top: 50mm; /* Larger margin to simulate a new header for pages starting after page 4 */
}
.container-body3{
background-color: #f0f0f0;
box-shadow: none;
width: 210mm;
height: 297mm;
margin-top: -30px;
}
.container h3 {
color: transparent;
}
.container-wrapper {
align-items: flex-start;
}
table {
margin-top: 15px;
border: 3px solid;
}
.appendix {
top: 45px;
}
/* Adjust font size for Disbursement Voucher in print */
.center-text b {
font-size: 14px;
}
.dvnumber {
background-color: #c6e0b4 !important;
-webkit-print-color-adjust: exact;
color: black; /* Make sure text remains readable */
border: 1.8px solid;
font-size: 15px;
}
.container-body3{
page-break-before: always;
}
.footer {
margin-top: 95% !important;
}}
.innerTable{
margin:0px;
border-color:white;
}
.lastRow{
padding:0px;
}
.align-text-right{
text-align: right;
}
.align-text-right{
text-align: right;
}
.no-border{
border: 0;
}
.footer {
margin-top: 99%;
}
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<html>
<body>
<div class="container-wrapper">
<div class="container">
<h3></h3>
<button class="print-button" onclick="printForms()">Print</button>
</div>
<div class="container-body3">
<br><br><br>
<span style="font-family: Calibri, sans-serif;" ><center>TESTING HEADER HEADER HEADER HEADER<br> SUB HEADER / SUB HEADER / SUB<br> no# 24-03-767 <br> for January 29, 2024</center></span>
<table style="font-family: Calibri, sans-serif;" >
<thead></thead>
<tbody>
<tr >
<td><b>No.</b></td>
<td><b>Account Number</b></td>
<td><b>ID NUMBER</b></td>
<td><b><center>NAME</center></b></td>
<td><b>AMOUNT</b></td>
<td><b>CHARGE</b></td>
<td><b><center>PURPOSE</center></b></td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="ali gn-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
<tr>
<td class="align-text-right" style="padding: 2; width:6%">1</td>
<td class="align-text-right" style="padding: 4;">367167793</td>
<td class="align-text-left" style="padding: 4;">16-10653</td>
<td class="align-text-left" style="padding: 4;">Santiago, Bruise N. </td>
<td style="padding: 4;" class="align-text-right">5,454,545.00</td>
<td class="align-text-left" style="padding: 4;">Charge test</td>
<td class="align-text-left" style="padding: 4;">TE for Mar 2024</td>
</tr>
</tbody>
</table>
<table style="border: 0; font-family: Calibri, sans-serif;" class="myClass" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td>
<table style="border: 0;">
<tbody>
<tr>
<td style="width: 0px;border:0;"></td>
<td style="width: 30px;border:0;"></td>
<td style="width: 100px;border:0;"></td>
</tr>
<tr>
<td style="font-size: 13px;padding: 0;" colspan="2" class="no-border">PREPARED BY:</td>
</tr>
<tr>
<td class="no-border"></td>
</tr>
<tr>
<td class="no-border"></td>
<td class="no-border" colspan="2" >
<!-- <center><b><u>Janice UUUUU</u></b></center> -->
<center><b><u><span contenteditable="true" id="editableName">Reymark Santiago</span></u></b></center>
</td>
</td>
</tr>
<tr>
<td class="no-border"></td>
<td class="no-border" colspan="2">
<center><span contenteditable="true" id="editablePosition">AAAA III</span></center>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 0;">
<tbody>
<tr>
<td style="width: 140px;border:0;"></td>
<td style="width:80px;border:0;"></td>
<td style="width:72px;border:0;"></td>
<td style="border:0;"></td>
</tr>
<tr>
<td style="font-size: 15px;background-color:rgb(158, 198, 255); padding: 0;" class="no-border coloredrow"><b>CHARGE</b></td>
<td style="font-size: 15;background-color:rgb(158, 198, 255); padding: 0; text-align: right;" colspan="2" class="no-border coloredrow"><b>Sum of AMOUNT</b></td>
</tr>
<tr>
<td style="padding: 0;" class="no-border"> charges</td>
<td style="padding: 0; text-align: right;" class="no-border" colspan="2">
5,482,119.00
</td>
</tr>
<tr>
<td style="padding: 0;;background-color:rgb(158, 198, 255);" class="no-border coloredrow"><b>GRAND Total</b></td>
<td style="padding: 0;background-color:rgb(158, 198, 255); text-align: right;" class="no-border coloredrow" colspan="2"><b>5,482,119.00</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>