HTML代码转换为pdf文件时的Dompdf表格边框问题答案

【问题标题】：Dompdf table border issue when HTML code converted to pdf fileHTML代码转换为pdf文件时的Dompdf表格边框问题
【发布时间】：2019-05-08 11:00:57
【问题描述】：

我正在使用 DOMPdf 库将 HTML 代码转换为 PDF。当我在浏览器中运行文件时，我已经用 HTML 设计了表格，它渲染得很好，但是当我实际生成 PDF 文件时，一个单元格缺少右侧边框，一个不应该显示边框的单元格有边框。

预期结果

我得到的实际结果。

这是我的代码

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>PaySlip</title>

    <style>
        .custom-font {
            font-weight: bold;
        }


        table.blueTable {
            border: 1px solid #000000;
            background-color: #ffffff;
            width: 100%;
            text-align: left;
            border-collapse: collapse;
        }

        table.blueTable td,
        table.blueTable th {
            border: 1px solid #020202;
            padding: 3px 2px;
        }

        table.blueTable tbody td {
            font-size: 13px;
        }

        table.blueTable tr:nth-child(even) {
            background: #ffffff;
        }

        table.blueTable thead {
            background: #1c6ea4;
            background: -moz-linear-gradient(top,
                #5592bb 0%,
                #327cad 66%,
                #1c6ea4 100%);
            background: -webkit-linear-gradient(top,
                #5592bb 0%,
                #327cad 66%,
                #1c6ea4 100%);
            background: linear-gradient(to bottom,
                #5592bb 0%,
                #327cad 66%,
                #1c6ea4 100%);
            border-bottom: 2px solid #444444;
        }

        table.blueTable thead th {
            font-size: 15px;
            font-weight: bold;
            color: #ffffff;
            border-left: 2px solid #d0e4f5;
        }

        table.blueTable tfoot td {
            font-size: 14px;
        }

        table.blueTable tfoot .links {
            text-align: right;
        }


    </style>
</head>

<body>
    <table class="blueTable">
        <thead>
            <tr>
                <th colspan="4" style="text-align: center">
                    Payslip for the Month of XYZ - 2019
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="custom-font">Name Of Employee</td>
                <td>Placeholder</td>


                <td class="custom-font">Payable Days</td>
                <td>Placeholder</td>
            </tr>

            <tr>
                <td class="custom-font">Employee Code</td>
                <td>Placeholder</td>


                <td class="custom-font">Paid Days</td>
                <td>Placeholder</td>
            </tr>

            <tr>
                <td class="custom-font">Designation</td>
                <td>Placeholder</td>

                <td class="custom-font">Joining Date</td>
                <td>Placeholder</td>
            </tr>

            <tr>
                <td class="custom-font">PAN No.</td>
                <td>Placeholder</td>

                <td class="custom-font">Date Of Birth</td>
                <td>Placeholder</td>
            </tr>
            <tr>
                <td class="custom-font">Aadhaar No.</td>
                <td>Placeholder</td>

                <td class="custom-font">Bank Name</td>
                <td>Placeholder</td>
            </tr>
            <tr>
                <td class="custom-font">PF No.</td>
                <td>Placeholder</td>

                <td class="custom-font">Bank Account No</td>
                <td>Placeholder</td>
            </tr>
            <tr>
                <td class="custom-font">UAN</td>
                <td>Placeholder</td>

                <td class="custom-font">Location</td>
                <td>Placeholder</td>
            </tr>

            <!-- space -->
            <tr style="border-right:">
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <!-- Salary info -->
            <tr style="text-align: center">
                <th>Earnings</th>
                <th>Amount[INR]</th>
                <th>Deductions</th>
                <th>Amount[INR]</th>
            </tr>

            <tr>
                <td class="custom-font">Basic Salary</td>
                <td></td>

                <td class="custom-font">Provident Fund</td>
                <td></td>
            </tr>

            <tr>
                <td class="custom-font">House Rent Allowance</td>
                <td class="custom-font"></td>

                <td class="custom-font">Professional Tax</td>
                <td></td>
            </tr>

            <tr>
                <td class="custom-font">Conveyance Allowance</td>
                <td></td>

                <td class="custom-font">TDS</td>
                <td></td>
            </tr>

            <tr>
                <td class="custom-font">Medical Allowance</td>
                <td></td>

                <td rowspan="3"></td>
                <td rowspan="3"></td>
            </tr>

            <tr>
                <td class="custom-font">Mobile Allowance</td>
                <td></td>
            </tr>

            <tr>
                <td class="custom-font">Executive Allowance</td>
                <td></td>
            </tr>

            <!-- space -->
            <tr>
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td style="border-right-style: hidden;">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <!-- Totals -->
            <tr>
                <th>Total Earnings</th>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>

            <tr>
                <th colspan="4">Net Pay : - Rs. 00,000.00/-</th>
            </tr>
            <tr>
                <th colspan="4">
                    Net Pay (In Words): - Rs. 0 Thousand 0 Hundred and 0 Only
                </th>
            </tr>

            <!-- space -->
            <tr style="border-bottom:hidden">
                <td colspan="4" style="border-left-style: hidden;border-right-style: hidden;text-align: center">
                    "This is a computer generated statement and does not require any
                    signature or stamp."
                </td>
            </tr>

            <!-- leave details -->
            <tr>
                <th class="custom-font" colspan="4" style="border-left-style:hidden;border-right-style:hidden">Leave Balance</th>
            </tr>

            <tr>
                <td class="custom-font" colspan="2">Accumulated Leave (Opening Leaves)</td>
                <td colspan="2">0</td>
            </tr>

            <tr>
                <td class="custom-font" colspan="2">Leave Taken</td>
                <td colspan="2">0</td>
            </tr>

            <tr>
                <td class="custom-font" colspan="2">Leave Balance (Closing Leaves)</td>
                <td colspan="2">0</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

【问题讨论】：

仅供参考，这看起来与this issue有关。

标签： php codeigniter-3 dompdf

【解决方案1】：

这是 Dompdf 0.8.3 及更早版本的渲染问题。问题的核心在于表格单元格的渲染顺序以及表格单元格边框折叠时渲染背景的技术。

首先，与 Dompdf 中的所有内容一样，文档结构中较早的元素在较晚的元素之前呈现。当一个单元格跨越行时，它会在以下行中的单元格之前呈现。这很重要，因为 PDF 中对象的堆叠顺序（后面的对象呈现在前面的对象之上）。

其次，单元格边框由任意两个相邻单元格的分组中的单个单元格呈现。对于水平相邻的单元格，右侧的单元格呈现左边框。对于垂直相邻的单元格，底部的单元格呈现顶部边框。

第三，单元格背景渲染到单元格边缘，不考虑边框。

现在考虑这三个事实，考虑到其他表格单元格右侧的跨行单元格。将呈现跨行单元格的左边框。下一行中的相邻单元格不会呈现边框，并且任何背景都会呈现单元格的整个宽度。因此，后面的单元格的背景将呈现在跨行单元格的边框之上。

您可以在以下示例中看到此问题（例如，在 Dompdf 0.8.3 中运行时）：

    <head>
        <title>Row-span overlap</title>
        <style>
            table {
                border-collapse: collapse;
            }
            table td {
                border: 1px solid red;
                background-color: #0000ff66;
            }
            .rowspan {
                border-left-width: 10px;
            }
        </style>
    </head>
    
    <body>
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">2</td>
                </tr>
                <tr>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </html>

该问题将在 Dompdf 0.8.4 中解决。解决该错误的主要更改是在边框内渲染背景。

【讨论】：