DomPDF无法很好地呈现表格。

Question

我正在尝试使用DomPDF生成PDF，但遇到了一个奇怪的问题。所有数据和其他内容都没问题，但在PDF中呈现时表格的第一行总是样式不对。起初，我以为可能是表格跨页导致上下文的样式出现问题，但我尝试将表格限制在一页上后发现问题仍然存在。因此，每一页的第一行表格都会出现问题。以下是我的代码和PDF的屏幕截图。

控制器

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

查看

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

第一页：

第二页：

非常感谢任何帮助。 谢谢

- RK.

---

如何将“th”更改为“td”？ - user557846

没有运气。实际上，我正在使用Bootstrap 3 CSS。那么，这是不是因为它的缘故？ - RK.

@RK。我可以确认这是真的。 - adamj

Answer 1

我使用

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

- Alan Fonseca TbonesKiller

Answer 2

几乎可以确定问题出在您对Bootstrap的使用上。许多与Bootstrap相关的dompdf问题都与:before/:after声明有关。我认为您可以通过为dompdf应用以下CSS来解决这个特定情况下的问题：

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

- BrianS

---

我应该把这个CSS添加到哪里？是我的主题还是其他地方？ - jackrabbithanna

@jackrabbithanna，您可以在引用Bootstrap样式表之后的任何位置添加此内容，以便它具有优先权。 - BrianS

@jackrabbithanna 将其放置在您的页面中，如下所示：<style type="text/css"> thead:before, thead:after { display: none; } tbody:before, tbody:after { display: none; } </style> - Pathros