Despite trying other solutions, my question may seem similar to others. In my case, I utilized the header as a static header for printing, a div element as my footer, and a table to display the content.
The issue I am facing is that when attempting to print the page, if the table's content overflows, it spills onto the second page. I aim to have the overflow content from the table on the first page automatically flow to the second page while ensuring that the header and footer remain visible on both pages.
HEADER
<header>
<center><h3><b>Miguel Enrique</b></h3>
<p><i>Diplomat<br>Fellow</i><br>Orthopaedic Surgeon</p>
</center>
</header>
<div class="row uniform half collapse-at-2">
<div class="12u">
<center><h4><b>---data----</b></h4></center>
<h4><p>------DATA--------------<br>Tel. 77 19 349 | 65 90 097
<br>Mon<b>·</b>Wed<b>·</b>Fri | 3:00pm - 5:00pm
<br>Tues<b>·</b>Thurs<b>·</b>Sat | 11:00am - 2:00pm |
<br> (All by appointment)</p></h5>
</div>
<div class="6u">
<div class="row uniform half">
<div class="12u">
<center><h4><b>--DATA---</b></h4></center>
<h5><p> ------DATA-------
<br>Tel. No. : (632) 789 - 7700 loc. 7330
<br>Mon-Thurs: 11am - 4pm | (by Appointment)</p><h5>
</div>
</div>
</div>
<div
BODY
<table class="print">
<thead>
<tr>
<th scope="col"><b>No.</b></th>
<th scope="col"><b>Prescriptions</b></th>
</tr>
</thead>
<tbody>
<?php foreach($new_array2 as $value) { $inc = @$inc + 1;?>
<tr>
<td><?php echo $inc; $prescription_array=explode('/',$value);?>
</td>
<td><?php foreach($prescription_array as $value2)
{ echo "<h5>".$value2."</h5>";
} ?>
</td>
</tr>
<?php }?>
</tbody>
</table>
FOOTER
<div class="row uniform half collapse-at-2">
<div class="12u">
<div class="row uniform half">
<font size="5"><b>Name</b></font><br>
License No. : 1<br>
</div>
</div>
</div>
Is there a solution to this issue? I want the overflowing content to seamlessly transition to the next page while maintaining the visibility of the header and footer across pages. https://i.sstatic.net/DYIjR.png
The first image demonstrates the current printing behavior, while the second picture depicts the desired output. Is achieving this layout possible in Google Chrome?