mPDF auto page break in a table row with long text

Question

I want to switch from TCPDF to mPDF. In my document, I'm using a two column layout which itself contains subtables that might have different height, so it looks like a fluid layout. With TCPDF it looks like:

The basic syntax for this layout is:

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td style="width: 50%;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="width: 40%;">Label ABC</td>
                    <td>Value XYZ</td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="width: 40%;">Label ABC</td>
                    <td>Value XYZ</td>
                </tr>
            </table>
            [...]
        </td>
        <td style="width: 50%;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="width: 40%;">Label ABC</td>
                    <td>Value XYZ</td>
                </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="width: 40%;">Label ABC</td>
                    <td>Value XYZ</td>
                </tr>
            </table>
            [...]
        </td>
    </tr>
</table>

Using mPDF, it tries to shrink the table, which is nothing I want. So I've disabled shrink with $pdf->shrink_tables_to_fit = 1;. Can I achieve a similar behavior in mPDF, so that table rows that contain long texts are auto break onto new page?

EDIT: Just to clarify, I want the only outer <tr> to break within content. The two columns of outer table contain many slim nested tables (see code and image above). Due to fluid layout, I've nested the tables in one outer <tr> containing two columns.

Answer 1

I recommend you rearrange your layout into a single table by using colspan and rowspan. Also using colgroup styles to enforce the various widths.

By avoiding nested tables, mPDF will be able to page break more more easily - basically because every row is breakable.

To do this you will need to figure out how many vertical cell divisions there is on the entire sheet and decide which column to put them into.

At the extreme you could have 1px columns but the code would be very difficult to maintain. Here's an example of a table using these three tags.

<table>
    <caption>School Sports Team Participation</caption>
    <colgroup>
        <col style="width: 20%;" span="1">
        <col style="width: 20%;" span="3">
        <col style="width: 40%;">
    </colgroup>
    <thead>
        <tr>
            <th rowspan="2">Sport</th>
            <th colspan="3">Team Composition</th>
            <th rowspan="2">Additional Notes</th>
        </tr>
        <tr>
            <th>Boys</th>
            <th>Girls</th>
            <th>Total Players</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Basketball</td>
            <td>15</td>
            <td>12</td>
            <td>27</td>
            <td rowspan="3">These teams compete in local school leagues</td>
        </tr>
        <tr>
            <td>Volleyball</td>
            <td>8</td>
            <td>14</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Soccer</td>
            <td>18</td>
            <td>10</td>
            <td>28</td>
        </tr>
        <tr>
            <td colspan="5">Total Sports Teams: 3</td>
        </tr>
    </tbody>
</table>

You could also add some CSS styles for mPDF to improve the appearance.

<style>
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    th {
        background-color: #f2f2f2;
    }
    caption {
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>