Page Break After Specific Number Of Rows - php

Question

I am developing a voucher printing application that prints serial numbers and pins from a MySQL table and displays them in a page.
The php code displays two records per row..with being in a separate column i.e two columns displayed side by side
Due to the format of the page (two records per row)..i can not display each record in a seperate table. Rather all records are contained in a "general" table.
The voucher printing requires two rows to be displayed on each page.
I implemented a "page-break-after: always" style to each row not divisble by two, but page break is not showing. My code is shown below:
$aray=array();
while($row=mysqli_fetch_array($sql_res))
{
$aray[]=$row;
}
$nr_elm=count($aray);
$table='<table width=100%><tr>';
$nr_col=2;
if($nr_elm>0)
{
$p=1;//This is the row counter
for($i=0;$i<$nr_elm;$i++)
{
$table.='<td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
'.$p.' <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
margin-left:60px;">
<p> Amount:'.$aray[$i]['amount'].' </p><p> Pin:17263648409</p><p> Serial:5374748548
</div></div></td>';
$col_to_add=($i+1)%$nr_col;
if($col_to_add==0)
{
if($p % 2 == 0) {
$table.="<tr style='page-break-after:always'>";
}
$table.='</tr><tr>';
$p++;
}
}
}
$table.='</tr></table>';
$table=str_replace('<tr></tr>','',$table);
echo $table;
?>
I viewed the page source and the "page break" style is showing for the neccessary row, as seen below
<tr style='page-break-after:always'></tr><tr><td><div style="border: 2px dashed #000;" ><div id="image" style="float:left;">
3 <img src="crswb1.png" height=80 width=60 />
</div><div id="texts" style=" float: none;
How can i ensure that the page break is displayed so that i can print only two rows per page?..Thanks.

Answer 1

The format of the page does not prevent you to use one table for every two values. E.g. use the following HTML Code:
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 1</td>
<td>This is cell No. 2 in Table 1</td>
</tr>
</table>
<table id="table1">
<tr>
<td>This is cell No. 1 in Table 2</td>
<td>This is cell No. 2 in Table 2</td>
</tr>
</table>
together with the following CSS Code:
#media print {
table {page-break-after: always;}
/* prevent blank page at end */
table:last-of-type {page-break-after: auto;}
}
/* If you want the fields on one line */
table, tr {
width: 100%;
/* If the fields still don't fit on one line
* make the font-size smaller */
font-size: 0.9em
}
it will print one table per page. Notice that even the last table will cause a page-break.
To see this work I prepared a codepen here. Open the codepen and try to print the page. You should see every table on it's own page.