如何在使用 Chrome 打印时不显示一个框两次，一个 div 框的背景在分页前不适合？

Question

看看下图（Chrome 中的页面打印对话框）：

灰色背景的DIV已经放不下第一页了，所以浏览器决定将整个div移动到一个新页面（这就是我想要的）。

但是我想要摆脱的是第一页上带有背景颜色的空框（它源自完全相同的 DIV）。

有没有办法把完整的盒子换到下一页？并且根本不在第一页上显示它（如果它不适合）。

最后我对打印页面不感兴趣，而是使用 wkhtml2pdf 从这个 HTML 生成 PDF。但这是同样的问题。

所以只有 webkit 的解决方案对我来说很好。

这里是HTML / CSS代码，如果你想试试上图中可以看到的内容。只需在 Chrome 中打开打印对话框，您应该会看到相同的结果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PP-00000074</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            align-self: center;
        }

        body {
            padding: 0;
            align-self: center;
            margin: 0;
        }

        table {
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            font-size: 13px;
            margin-bottom: 45px;
        }

        table tr {
            page-break-inside: avoid;
        }

        thead {
            width: 100%;
            align-self: center;
        }

        thead tr {
            border-bottom: 15px solid white;
        }

        th {
            color: #000000;
            font-weight: normal;
        }

        td {
            color: #7a7a7a;
            word-break: break-word;
        }

        tr.spaceAbove>td {
            padding-top: 20px;
        }

        .nowrap {
            white-space: nowrap;
        }

        .centerBodyBox {
            margin: 0 100px;
        }

        .invoiceTotal {
            page-break-inside: avoid;
            background-color: #eeeeee;
            font-size: 13px;
            line-height: 1.56;
            text-align: right;
            color: #000000;
        }

        .invoiceTotalColumn1 {
            font-size: 12px;
            color: #7a7a7a;
            padding: 35px 0;
            vertical-align: bottom;
        }

        .invoiceTotalColumn2 {
            width: 25%;
            padding: 35px 0;
            vertical-align: top;
        }

        .invoiceTotalColumn3 {
            width: 15%;
            padding: 35px 0;
            vertical-align: top;
        }

        .text-left {
            text-align: left;
            padding-right: 10px;
        }

        .text-right {
            text-align: right;
            padding-left: 10px;
        }

        .align-top {
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="centerBodyBox">
    <table>
        <thead>
        <tr >
            <th class="text-left">Beschreibung</th>
            <th class="text-right">Preis</th>
            <th class="text-right">Menge</th>
            <th class="text-right">Mwst.</th>
            <th class="text-right">Gesamt</th>
        </tr>
        </thead>
        <tr class="spaceAbove">
            <td class="text-left align-top">magni voluptates</td>
            <td class="nowrap text-right align-top">15,42 EUR</td>
            <td class="nowrap text-right align-top">2 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">30,84 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">rerum ipsa</td>
            <td class="nowrap text-right align-top">11,93 EUR</td>
            <td class="nowrap text-right align-top">2 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">23,86 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">rem consequuntur</td>
            <td class="nowrap text-right align-top">137,50 EUR</td>
            <td class="nowrap text-right align-top">1 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">137,50 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
    </table>
</div>
<div class="invoiceTotal">
    <div class="centerBodyBox">
        <table style="margin: 0">
            <tr>
                <td class="invoiceTotalColumn1 text-left">
                    Some text.
                </td>
                <td class="invoiceTotalColumn2 nowrap text-right">
                    <div>Zwischensumme (Brutto):</div>
                    <div>Versandkosten:</div>
                    <div>Zahlungsmethode:
                    </div>
                    <div>Nettobetrag (ohne Mwst):</div>
                    <div>zzgl. 19% Mwst.:
                    </div>
                    <div style="margin-top: 20px;"><b>Gesamtbetrag (Brutto):</b>
                    </div>
                </td>
                <td class="invoiceTotalColumn3 nowrap text-right">
                    <div>325,13 EUR</div>
                    <div>4,47 EUR</div>
                    <div>4,16 EUR</div>
                    <div >280,51 EUR</div>
                    <div>53,25 EUR</div>
                    <div style="margin-top: 20px;"><b>333,76 EUR</b></div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Answer 1

您在 .invoiceTotal 中使用 page-break-inside。

但它的 invoiceTotal 坏了。在正文中添加 page-break-inside:avoid。

如何在使用 Chrome 打印时不显示一个框两次，一个 div 框的背景在分页前不适合？

How to not display a box twice, when printing with Chrome a div box with background that does not fit before page break?

html

css

pdf

wkhtmltopdf