dompdf generating PDF in with many blank pages between content

Question

I'm using DOMPDF to generate pdf files from html. PDF file is getting generated but there are many blank pages are appearing in between content. Following is my php code.

<?php
    $html=file_get_contents("views/testnew.html");
//  echo $html;die();
    $paper_orientation = 'landscape';

    ob_start();
    require_once("dompdf/dompdf_config.inc.php");
    $pdfcontent = $html;

    $dompdf = new DOMPDF();
    $dompdf->set_paper('A4', $paper_orientation);
    $dompdf->load_html($pdfcontent);
    $dompdf->render();

//  $pdf = $dompdf->output();
    $pdf=$dompdf->stream("my_pdf.pdf", array("Attachment" => 0));
//  file_put_contents('Brochure.pdf', $pdf);
?>

Following is my HTML that is I'm writing in PDF file

http://jsfiddle.net/6RmmB/

Since PDF is getting generated I don't think there is any problem with PHP code. Something must be wrong in html, But not able to figure it out what exactly ?

Or I'm missing something in PHP code ?

Content next to "Employer identification number" is appearing after about 8-9 blank pages

Answer 1

This looks to be due to a bug in how dompdf handles paging of table cells. If you remove the outer table, which appears to only exist to supply a border, the page will render better. You may still need to tweak the structure/styling, however, to get exactly what you want.

For example, instead of this:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="" style="border:1px solid #ccc;color: #000;font-family: Arial,Helvetica,sans-serif;font-size:14px;">
    <tr>
        <td>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-bottom:1px solid #ccc">
                <tr>
                    <td width="15%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;line-height:20px">Form
                        <img src="/var/www/html/pm5/bodytechniques/working/development/version5/therapist/images/w9-form.JPG" width="83" height="37" style="margin-left:15px" />
                        <br>(Rev. August 2013)
                        <br>Department of the Treasury
                        <br>Internal Revenue Service</td>
                    <td width="69%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;text-align:center;line-height:45px">
                        <h1 align="center">Request for Taxpayer Identification Number and Certification</h1>
                    </td>
                    <td width="16%" align="left" valign="top">
                        <h3 style="line-height:25px;padding:10px">Give Form to the requester. Do not send to the IRS</h3>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Do this:

<div style="border:1px solid #ccc;color: #000;font-family: Arial,Helvetica,sans-serif;font-size:14px;">
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-bottom:1px solid #ccc">
        <tr>
            <td width="15%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;line-height:20px">Form
                <img src="/var/www/html/pm5/bodytechniques/working/development/version5/therapist/images/w9-form.JPG" width="83" height="37" style="margin-left:15px" />
                <br>(Rev. August 2013)
                <br>Department of the Treasury
                <br>Internal Revenue Service</td>
            <td width="69%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;text-align:center;line-height:45px">
                <h1 align="center">Request for Taxpayer Identification Number and Certification</h1>
            </td>
            <td width="16%" align="left" valign="top">
                <h3 style="line-height:25px;padding:10px">Give Form to the requester. Do not send to the IRS</h3>
            </td>
        </tr>
    </table>
</div>

Answer 2

I have problem when multiple tables doesn't fit to one page. Solution for this is easy, add <div style="clear: both;"> after table.