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...

Is there any possibility that the orders can be too big for one page? If not I would suggest using the @media print css functionality to get what you want. — jonosma, Oct 24 '13 at 19:03
http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size http://stackoverflow.com/questions/797432/css-formatting-a4-print https://developer.mozilla.org/en-US/docs/Web/CSS/@media — jonosma, Oct 24 '13 at 19:05
It doesn't happen often, but it is possible for an order to be too big for one page. When that's the case, we just printed it out on two pages and stapled it together — Joshua Zollinger, Oct 24 '13 at 19:38

score 2 · Answer 1 · answered Oct 24 '13 at 19:01

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

answered Oct 24 '13 at 19:01

Kierchon

2,271
1
19
24

This is actually one of the first things that I tried. If I put something inside the div, it will affect whether it is on the top of the page or the bottom of the order, but the page break problem still persists. – Joshua Zollinger Oct 24 '13 at 19:05
I have also tried setting the height of the div, which didn't work either. – Joshua Zollinger Oct 24 '13 at 19:11

score 0 · Answer 2 · answered Oct 24 '13 at 19:51

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.

Page breaks in HTML

2 Answers2