Page breaks in HTML

Question

So... HTML is still giving me a hard time. I have some code that prints out a report of the order for each member, which must be printed as we hand them out to the people delivering the orders. The problem is that the div which contains the page break is a whole bunch of odd sizes, so when I try to print off the report the formatting is very odd. This sometimes results in blank pages being printed, or having an order split between the bottom and top of two different pages.

I would like to figure out how to get each order to print on its own page, right at the top of the page, but that last div is not working the way I want it to. I have been trying off and on to fix this for weeks; can someone help me?

Here is the code for the page:

<style>
.first-time{
    text-align: right;
    color:#fff;
    background: #a00;
}
.page-break {
    display: block;
    page-break-before: always;
}
.title th{
    background: #6c6c6c;
    color:#fff
}
</style>
<script>
</script>
<div class="reports">
<table cellpadding="0" cellspacing="0">
    <?php $count_orders = 0 ?>
    <?php $count_products = 0 ?>
    <?php foreach ($sites as $site): ?>
        <tr>
            <th class="big" colspan="7"><?php echo $site ?></th>
        </tr>
        <?php foreach ($orders as $page_number => $order): ?>
            <?php if ($order['Site']['name'] == $site): ?>
                <tr class="title">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Site</th>
                </tr>
                <tr>
                    <td><strong><?php echo $order['Account']['first_name'] ?></strong></td>
                    <td><strong><?php echo $order['Account']['last_name'] ?>&nbsp;<span style="color:red"><?php echo ($order['Account']['homebound'] == 1)?'(homebound)':'';?></span></strong></td>
                    <td><?php echo $order['Account']['street1'].$order['Account']['street2'] ?></td>
                    <td><?php echo $order['Account']['city']?></td>
                    <td><?php echo $order['Account']['email'] ?></td>
                    <td><?php echo $order['Account']['phone'] ?></td>
                    <td><?php echo $order['Site']['name'] ?></td>
                </tr>
                <tr>
                    <th colspan="6">Product</th>
                    <th>Quantity</th>
                </tr>
                <?php foreach ($order['ProductType'] as $productType): ?>
                    <tr>
                        <td colspan="6"><?php echo $productType['type'] ?></td>
                        <td><?php echo $productType['OrdersProductType']['quantity']*$productType['units'] ?></td>
                    </tr>
                    <?php $count_products++ ?>
                <?php endforeach ?>
                <?php foreach ($order['Coupon'] as $coupon): ?>
                    <tr>
                        <td colspan="6">Coupon</td>
                        <td>-<?php echo $coupon['discount'] ?></td>
                    </tr>
                <?php endforeach ?>
                <?php $count_orders++ ?>
                <input class='account-id' href='/Reports/firstTime' data-sale="<?php echo $order['Order']['sale_id'] ?>" type='hidden' name='data[Account][id]' value="<?= $order['Account']['id'] ?>" />
                <tr></tr>
                <tr><td style='border:none; padding:0;'><div class='page-break'></div></td></tr>
             <?php endif ?>
        <?php endforeach ?>
    <?php endforeach ?>
</table>

Most of that can probably be ignored, but I included it just in case since my HTML coding experience is minimal at best. I'm mostly a back-end programmer, but the people using this report don't understand the difference and don't get why I can't just fix it by adding a page break like in Word...

Answer 1

I'm going to go ahead and close this question. After talking with my other programmer, we haven't found exactly the root cause of the problem, but we worked around it by separating the table into two tables, one of which was just for the page break.

This is, we know, terrible coding style. However, it fixed the problem, which leads us to believe that something is grabbing padding from the tables and adding it after the page break. I wasn't able to find what it was, but splitting it fixed it.

So... bad coding, but it got it fixed. For our little company, that is good enough. Thank you for the help.

Answer 2

I think you want to use

.page-break {
    display: block;
    page-break-after: always;
}

so it breaks the page after every order not right before that div. I could be wrong though try it and let me know