Laravel DomPDF跨页表格底部边框重复显示问题求助

生成PDF代码 #

$mainPdf = Pdf::loadView('banks_preferred.main', $necessaryData)
    ->setPaper('letter', 'portrait')
    ->setOption('isFontSubsettingEnabled', true)
    ->setOption('isRemoteEnabled', true)
    ->setOption('isHtml5ParserEnabled', true)
    ->setOption('margin-top', 50)
    ->setOption('margin-bottom', 50)
    ->setOption('margin-left', 30)
    ->setOption('margin-right', 30)
    ->setOption('font', 'fonts/lucida-console.ttf')
    ->setOption('isPhpEnabled', true)
    ->output();

表格模板代码 #

<table class="tab" style="border: 1.5px solid;" cellspacing="0">
    <thead>
    <tr style="height:10pt">
        <td style="width:572pt;border-bottom-style:solid;border-bottom-width:1.5px;border-bottom-color:#005B43;border-top-style:solid;border-top-width:1.5px;border-top-color:#000;"
            colspan="3" bgcolor="#468876">
            <p class="s2"
               style="padding-left: 12pt;text-indent: 0pt;line-height: 8pt;text-align: left;margin-top: 1px; margin-bottom: 2px;">
                ******</p>
        </td>
    </tr>
    <tr style="height:9pt; border-bottom-style:solid;border-bottom-width:1pt;border-bottom-color:#005B43">
        <td style="width:52pt;border-top-style:solid;border-top-width:0;border-top-color:#005B43; border-bottom: 1.5px solid #005b43;"
            bgcolor="#468876">
            <p class="s5" style="padding-right: 7pt;text-indent: 0pt;line-height: 8pt;text-align: center;">Date</p>
        </td>
        <td style="width:203pt;border-top-style:solid;border-top-width:0;border-top-color:#005B43;border-bottom: 1.5px solid #005b43;"
            bgcolor="#468876">
            <p class="s5" style="padding-left: 14pt;text-indent: 0pt;line-height: 8pt;text-align: left;">Description
            </p>
        </td>
        <td style="width:317pt;border-top-style:solid;border-top-width:0;border-top-color:#005B43;border-bottom: 1.5px solid #005b43;"
            bgcolor="#468876">
            <p class="s5" style="padding-right: 223pt;text-indent: 0pt;line-height: 8pt;text-align: right;">Amount
            </p>
        </td>
    </tr>
    </thead>
    <tbody class="duocolor">
    @forelse($credit_array as $credit)
        <tr style="height:8pt;">
            <td style="width:52pt;">
                <p class="s3"
                   style="padding-left: 5pt;padding-right: 7pt;text-indent: 0pt;text-align: center;">
                    {{ $credit['date'] }}</p>
            </td>
            <td style="width:203pt;">
                <p class="s3"
                   style="padding-left: 14pt;text-indent: 0pt;text-align: left;">{!! $credit['description'] !!}</p>
            </td>
            <td style="width:317pt;">
                <p class="s3" style="padding-right: 223pt;text-indent: 0pt;text-align: right;">{{(string)$credit['amount']}}
                </p>
            </td>
        </tr>
    @empty
        <tr style="height:8pt;">
            <td colspan="3" style="width:100%; border-bottom: 1.5px solid #000;">
                <p class="s3" style="padding-left: 5pt;padding-right: 7pt;text-indent: 0pt;text-align: left;">
                    No Credits
                </p>
            </td>
        </tr>
    @endforelse
    </tbody>
</table>

问题说明 #

1. 表格与<td>元素边框颜色不一致
2. 表格跨页时，页面末尾无法显示表格底部边框，尝试过绝对定位、固定定位、伪元素均无效

解决方法 #

1. 统一边框样式与颜色 #

DOMPDF处理边框时，border-collapse: collapse能避免边框重叠导致的颜色冲突，同时统一表格内所有元素的边框规则：

• 修改表格样式，添加border-collapse: collapse;，替换原有的cellspacing="0"
• 统一表格和<td>的边框颜色，避免混合使用#000和#005B43，根据需求调整为单一颜色或明确层级

修改后的表格开头：

<table class="tab" style="border: 1.5px solid #000; border-collapse: collapse;">

2. 解决跨页底部边框缺失 #

利用DOMPDF对HTML表格<tfoot>的支持，<tfoot>会在每页表格底部重复渲染，可通过它添加跨页时的底部边框：

• 在表格末尾添加<tfoot>标签，内部设置一行空的单元格，指定底部边框样式

添加后的表格结构：

<tfoot>
    <tr>
        <td colspan="3" style="border-bottom: 1.5px solid #000; height: 0; padding: 0;"></td>
    </tr>
</tfoot>
</table>

3. 优化行拆分规则 #

为避免行被页面拆分导致边框断裂，给表格行添加page-break-inside: avoid样式，尽量保持行的完整性：

<tr style="height:8pt; page-break-inside: avoid;">

内容的提问来源于stack exchange，提问作者bradley cooper