domPDF 嵌套表格问题（右下角的矩形空白）

Question

我正在使用 Laravel 创建一个 PDF 报告，其中有一个很大的 table，其中嵌套了另外 3 个 table，以便并排查看.我知道 domPDF 不支持浮动，所以我不得不这样做。我也不能使用定位，因为页面上会重复出现相同的元素，所以这似乎是最好的主意。

但是，每当我在 PDF 中有多个嵌套 table 时，就会发生这种奇怪的事情：

我已经能够在线找到任何解决方案。

源代码：

@foreach ($employees as $employee)

            <table style="width: 100%; margin-top: 5px; border-bottom: 1px solid grey; margin-bottom: 5px;" border="0" cellspacing="0" cellpadding="5">
                <tbody>
                    <tr>
                        <td width="25%" style="background: lightgrey;">Name: <strong>{{$employee['info']->name}}</strong></td>
                        <td width="25%" style="background: lightgrey;">Mobile: <strong>{{$employee['info']->mobile}}</strong></td>
                        <td width="25%">Date: <strong>{{$inputs['date']}}</strong></td>
                        <td width="25%">Remarks:</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table style="width: 100%;" border="1" cellpadding="5" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th colspan="3">Receive</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($employee['given']->isEmpty())
                                        <tr>
                                            <td colspan="2"></td>
                                        </tr>
                                    @else
                                        @foreach ($employee['given'] as $tr)

                                        <tr>
                                            <td>{{ strtoupper($tr->category) }}</td>
                                            <td style="text-align: right;">{{ App\Transaction::formatMoney($tr->amount) }}</td>
                                        </tr>

                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </td>
                        <td colspan="2">
                            <table style="width: 100%;" border="1" cellpadding="5" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th colspan="3">Return</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($employee['returned']->isEmpty())
                                        <tr>
                                            <td colspan="2"></td>
                                        </tr>
                                    @else
                                        @foreach ($employee['returned'] as $tr)

                                        <tr>
                                            <td>{{ strtoupper($tr->category) }}</td>
                                            <td style="text-align: right;">{{ App\Transaction::formatMoney($tr->amount) }}</td>
                                        </tr>

                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table style="width:100%" border="1" cellpadding="2" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td>Total Receive</td>
                                        <td style="text-align: right;">{{ App\Transaction::formatMoney($employee['given']->sum('amount')) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Total Return</td>
                                        <td style="text-align: right;">{{ App\Transaction::formatMoney($employee['returned']->sum('amount')) }}</td>
                                    </tr>
                                    <tr style="background-color: {{ $employee['returned']->sum('amount') - $employee['given']->sum('amount') < 0 ? 'lightgrey' : '' }}">
                                        <td>Balance</td>
                                        <td style="text-align: right;">{{ App\Transaction::formatMoney($employee['returned']->sum('amount') - $employee['given']->sum('amount')) }}</td>
                                    </tr>
                                    <tr>
                                        <td>B2B</td>
                                        <td style="text-align: right;">{{ App\Transaction::formatMoney($employee['b2b']) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Sale</td>
                                        <td style="text-align: right;">{{ App\Transaction::formatMoney($employee['sale']) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

        @endforeach

Answer 1

看起来您的 table headers（"Receive" 和 "Return"）设置为 colspan="3"，而 table 只有 2。显然在渲染 table 时存在一些错误行为，但如果将 colspan 设置为 2，它应该会按预期渲染。