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: enter image description here

Page 2: enter image description here

Any help will be highly appreciated. Thanks

No Luck. Actually, I am using bootstrap 3 css. So, is there any chance this is because of it ? — RK., Apr 13 '15 at 03:00

score 19 · Answer 1 · answered Jan 21 '16 at 17:33

19

I use

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

answered Jan 21 '16 at 17:33

Alan Fonseca TbonesKiller

191
1
2

score 11 · Answer 2 · answered Apr 15 '15 at 22:50

11

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; }

answered Apr 15 '15 at 22:50

BrianS

13,284
15
62
125

Where do I add this CSS? To my theme, or somewhere else? – jackrabbithanna Jan 26 '16 at 22:12
@jackrabbithanna you would add this anywhere *after* the Bootstrap stylesheet reference so that it takes precedence. – BrianS Jan 27 '16 at 00:58
@jackrabbithanna Place it somewhere in your page like this: `` – Pathros Apr 11 '16 at 21:18

DomPDF does not render table nicely

2 Answers2

Linked