DomPDF does not render table nicely

Question

I am trying to get PDF using DomPDF but I come cross a strange problem. All the data and other things are fine but when it renders in PDF the first line of the table is always out of style. Firstly, I though may be table is going to the next page which cause style out of context but I tried to limit table to one page and found out that the problem still exists. So, the first row of table on every page goes crazy. Following is my code and screen shots of PDF.

Controller

$dompdf = new DOMPDF();
$dompdf->load_html($listing);
$dompdf->set_paper('a4', 'landscape');
$dompdf->render();
$dompdf->stream("sample.pdf");

View

<table class="table table-bordered">
    <tr>
        <th width="150">Client </th>
        <td>Client Name </td>
    </tr>

    <tr>
        <th>Site </th>
        <td><?php print $site->title; ?></td>
    </tr>

    <tr>
        <th>Address </th>
        <td>
            <?php 
                print $site->unit.' '.
                $site->street.' '.
                $site->suburb.' '.
                $site->state.' '.
                $site->location; 
            ?>
        </td>
    </tr>

    <tr>
        <th>Post Code </th>
        <td><?php print $site->postcode; ?></td>
    </tr>
    <tr>
        <th colspan="2"> Site Information</th>
    </tr>
    <tr>
        <td colspan="2" height="150"> <?php print $site->site_information; ?></td>
    </tr>
    <tr>
        <th colspan="2">Work Instruction</th>
    </tr>
    <tr>
        <td colspan="2" height="200"> <?php print $site->work_instruction; ?></td>
    </tr>
    <tr>
        <th colspan="2">Equipment on Site</th>
    </tr>
    <tr>
        <td colspan="2"> <?php print $site->site_equipment; ?></td>
    </tr>
    <tr>
        <th colspan="2">Special Instructions</th>
    </tr>
    <tr>
        <td colspan="2" height="100"> <?php print $site->special_instruction; ?></td>
    </tr>
    <tr>
        <th>Contact Person </th>
        <td><?php print $site->contact_person; ?></td>
    </tr>
    <tr>
        <th>Contact Number </th>
        <td><?php print $site->contact_no; ?></td>
    </tr>
</table>

Page 1:

Page 2:

Any help will be highly appreciated. Thanks

Answer 1

I use

thead:before, thead:after { display: none; }
tbody:before, tbody:after { display: none; }

Answer 2

Almost certainly the issue is your use of Bootstrap. A lot of dompdf issues related to Bootstrap have to do with the :before/:after declarations. I think you can work around the problem in this particular case by applying the following CSS for dompdf:

tbody:before, tbody:after { display: none; }