Print Report only 6 data for 1 page - php

Question

i create a report. i try print preview this report.
but i want show 6 data/page page size a4 (landscape).
i already try loop 24 data. and try print preview in google chrome
there 1 data must be down to page 2
see my picture
[![enter image description here][1]][1]
then i check page 2 already same.
this page 2
[![enter image description here][2]][2]
How to fix this, i want report show only 6 data/page
this is my full code, you can try in localhost.
<style>
#caption
{
color:white;
font-weight:bold;
text-align:center;
background-color: #4CAF50;
}
table
{
border-collapse: collapse;
}
th, td
{
padding: 0px;
font-family:arial;
font-size:13px
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
</style>
<table align="center" width="100%" border="1">
<tr>
<td colspan="7" style="vertical-align: top;" id="caption"><font size="3">Data Pendaftar</font></td>
</tr>
<?php
$x = 1;
while($x <= 24)
{
?>
<tr>
<td id="caption">Foto Siswa/i</td>
<td id="caption">Nama Lengkap Siswa/i</td>
<td id="caption">Tempat Lahir</td>
<td id="caption">Tanggal Lahir</td>
<td id="caption">Usia</td>
<td id="caption">L/P</td>
<td id="caption">Agama</td>
</tr>
<tr>
<td align="center" rowspan="3">
<img border="1" src="https://akphoto4.ask.fm/769/854/890/910003014-1s093lj-dc47ceo09kenpt5/original/avatar.jpg"style="width:80px;height:80px;">
</td>
<td align="center">Vasco Da Gama</td>
<td align="center">Spain</td>
<td align="center">01 February 1800</td>
<td align="center">79</td>
<td align="center">L</td>
<td align="center">Kristen</td>
</tr>
<tr>
<td id="caption" colspan="2">Alamat</td>
<td id="caption" colspan="2">No. Telpon | No. Hp </td>
<td id="caption" >Tanggal Daftar</td>
<td id="caption">Status</td>
</tr>
<tr>
<td colspan="2">Spain</td>
<td colspan="2" align="center">0800000000</td>
<td >07 Februari 2000 13:15:33</td>
<td align="center">Pending</td>
</tr>
<?php
$x++;
}
?>
</table>

Answer 1

In this situation, you could create a separate table per page with only 6 rows. Only display the "Data Pendaftar" on the first page, add class="break" to every table except the table on the last page and add a CSS rule table.break{page-break-after:always}. I added a <br /> after each table, so it looks good in the browser before it prints. This will always print 6 rows per page, even when you're accidentally in portrait mode...
<style>
#caption{color:white;font-weight:bold;text-align:center;background-color:#4CAF50}
table{border-collapse:collapse}
th, td{padding: 0px;font-family:arial;font-size:13px}
tr:nth-child(even){background-color:#f2f2f2}
th{background-color:#4CAF50;color:white}
table.break{page-break-after:always}
</style>
<?php $i = 1; while ($i <= 4) { ?>
<table align="center" width="100%" border="1"<?php if ($i < 4) { ?> class="break" <? } ?>>
<?php if ($i == 1) { ?>
<tr>
<td colspan="7" style="vertical-align: top;" id="caption"><font size="3">Data Pendaftar</font></td>
</tr>
<?php } $x = 1; while ($x <= 6) { ?>
<tr>
<td id="caption">Foto Siswa/i</td>
<td id="caption">Nama Lengkap Siswa/i</td>
<td id="caption">Tempat Lahir</td>
<td id="caption">Tanggal Lahir</td>
<td id="caption">Usia</td>
<td id="caption">L/P</td>
<td id="caption">Agama</td>
</tr>
<tr>
<td align="center" rowspan="3">
<img border="1" src="https://akphoto4.ask.fm/769/854/890/910003014-1s093lj-dc47ceo09kenpt5/original/avatar.jpg"style="width:80px;height:80px;">
</td>
<td align="center">Vasco Da Gama</td>
<td align="center">Span</td>
<td align="center">01 Feb 1800</td>
<td align="center">79</td>
<td align="center">L</td>
<td align="center">Kristen</td>
</tr>
<tr>
<td id="caption" colspan="2">Alamat</td>
<td id="caption" colspan="2">No. Telpon | No. Hp </td>
<td id="caption" >Tanggal Daftar</td>
<td id="caption">Status</td>
</tr>
<tr>
<td colspan="2">Spain</td>
<td colspan="2" align="center">021000000 | 0800000000</td>
<td >07 Februari 2000 13:15:33</td>
<td align="center">Pending</td>
</tr>
<?php $x++; } ?>
</table>
<br />
<?php $i++; } ?>