Chrome 浏览器 - 打印标题中包含多行的表格问题

Question

The goal - to print pages with tables the following way:

1. If the whole table is taller than A4 paper list, to duplicate headers for each page
2. If the table is smaller than A4 paper list, to not break the page before next table

For one-row headers, this CSS property works as it should:

page-break-inside:auto;

The problem - it comes by using more complicated table headers with 2+ rows, when such headers are somewhere at the middle of page break.

For better reference, here is the sample table code which can be used. Please be sure to open HTML file with this code only, without any additional code usually provided by build-in code snippet tool:

 <style> td { border: 1px solid lightblue; padding: 10px; } table { page-break-inside: auto; } tbody td { border: 1px solid blue; font-weight: bold; } </style> <table> <thead> <tr> <td> <div>this is table header 1</div> </td> </tr> <tr> <td> <div>this is table header 2</div> </td> </tr> <tr> <td> <div>this is table header 3</div> </td> </tr> </thead> <tbody> <tr> <td> <div>this is table body 1</div> </td> </tr> <tr> <td> <div>this is table body 2</div> </td> </tr> <tr> <td> <div>this is table body 3</div> </td> </tr> <tr> <td> <div>this is table body 4</div> </td> </tr> <tr> <td> <div>this is table body 5</div> </td> </tr> <tr> <td> <div>this is table body 6</div> </td> </tr> <tr> <td> <div>this is table body 7</div> </td> </tr> <tr> <td> <div>this is table body 8</div> </td> </tr> <tr> <td> <div>this is table body 9</div> </td> </tr> <tr> <td> <div>this is table body 10</div> </td> </tr> <tr> <td> <div>this is table body 11</div> </td> </tr> <tr> <td> <div>this is table body 12</div> </td> </tr> <tr> <td> <div>this is table body 13</div> </td> </tr> <tr> <td> <div>this is table body 14</div> </td> </tr> <tr> <td> <div>this is table body 15</div> </td> </tr> <tr> <td> <div>this is table body 16</div> </td> </tr> <tr> <td> <div>this is table body 17</div> </td> </tr> <tr> <td> <div>this is table body 18</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> </tbody> </table> <table> <thead> <tr> <td> <div>this is table header 1</div> </td> </tr> <tr> <td> <div>this is table header 2</div> </td> </tr> <tr> <td> <div>this is table header 3</div> </td> </tr> </thead> <tbody> <tr> <td> <div>this is table body 1</div> </td> </tr> <tr> <td> <div>this is table body 2</div> </td> </tr> </tbody> </table>

If you try to print the following HTML page, this issue appears: screenshot of the issue

What was tried

different combinations of all page-break related properties for table header tags.

Answer 1

 td { border: 1px solid lightblue; padding: 10px; } tbody td { border: 1px solid blue; font-weight: bold; }.avoid-page-break { page-break-inside: avoid; break-inside: avoid; position: relative; }

 <div class="avoid-page-break"> <table> <thead> <tr> <td> <div>HEAD OF TABLE 1</div> </td> </tr> <tr> <td> <div>HEAD OF TABLE 1</div> </td> </tr> <tr> <td> <div>HEAD OF TABLE 1</div> </td> </tr> </thead> <tbody> <tr> <td> <div>this is table body 1</div> </td> </tr> <tr> <td> <div>this is table body 2</div> </td> </tr> <tr> <td> <div>this is table body 3</div> </td> </tr> <tr> <td> <div>this is table body 4</div> </td> </tr> <tr> <td> <div>this is table body 5</div> </td> </tr> <tr> <td> <div>this is table body 6</div> </td> </tr> <tr> <td> <div>this is table body 7</div> </td> </tr> <tr> <td> <div>this is table body 8</div> </td> </tr> <tr> <td> <div>this is table body 9</div> </td> </tr> <tr> <td> <div>this is table body 10</div> </td> </tr> <tr> <td> <div>this is table body 11</div> </td> </tr> <tr> <td> <div>this is table body 12</div> </td> </tr> <tr> <td> <div>this is table body 13</div> </td> </tr> <tr> <td> <div>this is table body 14</div> </td> </tr> <tr> <td> <div>this is table body 15</div> </td> </tr> <tr> <td> <div>this is table body 16</div> </td> </tr> <tr> <td> <div>this is table body 17</div> </td> </tr> <tr> <td> <div>this is table body 18</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> <tr> <td> <div>this is table body 19</div> </td> </tr> </tbody> </table> </div> <div class="avoid-page-break"> <table> <thead> <tr> <td> <div>HEAD OF TABLE 2</div> </td> </tr> <tr> <td> <div>HEAD OF TABLE 2</div> </td> </tr> <tr> <td> <div>HEAD OF TABLE 2</div> </td> </tr> </thead> <tbody> <tr> <td> <div>this is table body 1</div> </td> </tr> <tr> <td> <div>this is table body 2</div> </td> </tr> </tbody> </table> </div>