Line break in HTML tables

Question

I’m making an HTML page which is an image print report of a service order. Basically, I set a table with two sub-tables that are: 1. header with data; 2. body with images of the service order. Need that in printing (use Chrome to print as PDF file) the page breaks after table 2.

My code (which has to be exactly this way, unfortunately):

<style type="text/css">img {
  max-width: 250px !important;
  max-height: 250px !important;
}
.txt {
  font-family:arial,helvetica,sans-serif;
}
.txt td {
    padding: 3px 1px 3px 3px;
}
.break {
    page-break-before: always;
}
</style>
<table border="0" data-source="{anexos.listaAnexos}" style="width:100%">
    <tbody>
        <tr>
            <td>
            <table border="0" cellpadding="1" class="break" style="border-collapse:collapse; width:100%">
                <thead>
                    <tr>
                        <td>
                        <table border="0" style="width:100%">
                            <tbody>
                                <tr>
                                    <td colspan="4"><span>TEXTO</span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                        <table border="1" cellpadding="1" cellspacing="1" class="txt" style="border-collapse:collapse; width:100%">
                            <tbody>
                                <tr>
                                    <td style="text-align:center; vertical-align:middle"><span>IMAGEM</span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

The report would be generated -repeatedly- as follows:

However, I could not make it break after sub-table 2.

This HTML I use within a system (which has certain limitations, hence the HTML gambiarra), and which iterates according to a variable that searches the OS records to generate an image report of several service orders.

What do you suggest in this case?

Answer 1

You can’t break a table in the middle or break a table inside the other.

"The authors are advised that the nesting of floats, divs and boxes with postion absolute between themselves, and between table cells should be used carefully, since the nesting depth of these constructs depends on the printer and the implementation."

Source: https://www.w3.org/TR/css-print/#s.8.1

If you put the property page-break-before: always; face table that you include in loop you get each one to stay on a different page.

Briefly enough you put your class .break in table data-source="anexos.listaAnexos}"

---

OBS: Additional information about breaking a table-row

https://drafts.csswg.org/css-page-3/#page-break-after