0

Help everyone! Chrome print preview is a problem when the user's chrome was automatically upgraded to version 108.

I configuring the rowspan attribute of the td element in the table element make the merged row to exceed one page, it will break. Like those pic.

<tr>
    <td rowspan="16">5</td>
    <td rowspan="16">1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td colspan="5">1</td>
    <td>1</td>
    <td>1</td>
</tr>

html element

preview break

But the same webpage is normal when it is displayed, and it is also normal in 107 and earlier versions. Like this pic.

preview normal

I found the log for chrome. chrome-108 Then added the style, but there are still some break.

tr {
    break-after: aviod;
    break-before: aviod;
    break-inside: aviod;
}

There are still some break

Pander
  • 1
  • 1

1 Answers1

0

I have resolved this issue on all browsers using:

HTML

<div class="print-container">
   <div id="page1" class="page"></div>
   <div id="page2" class="page"></div>
   <div id="page3" class="page"></div>
</div>

CSS

.print-container {
    contain: strict;
    display: table
}
.page {
    page-break-inside: avoid !important;
    page-break-before: unset !important;
}
.page:last-of-type {
    overflow: hidden;
}
halfer
  • 19,824
  • 17
  • 99
  • 186