domPDF Nested Tables Issue (Ractangular Whitespace in the bottom-right corcer)

Question

I'm using Laravel to create a PDF report that has a big table which has 3 other tables nested inside for the sake of side-by-side viewing. I know domPDF won't support Floating so I had to do this. I couldn't also use Positioning since there will be repeatations of the same element on page so this seemed like the best idea.

However, whenever I have multiple nested tables in PDF, this weird thing happens:

I have been able to find any solutions to this online.

Source Code:

@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

It looks like your table headers ("Receive" and "Return") are set to colspan="3" while the actual number of columns in that table are only 2. It's obviously some buggy behavior around rendering the table, but if you set the colspan to 2 it should render as expected.