csshtmlpdfwkhtmltopdf
How to not display a box twice, when printing with Chrome a div box with background that does not fit before page break?
Have a look at the following image (page print dialog in Chrome):
The DIV with grey background does not fit on the first page anymore, so the browser decides to move the whole div to a new page (which is what I want).
What I however want to get rid of, is the empty box with background color on the first page (which originates from the very same DIV).
Is there a way to wrap the complete box to the next page? And not display it on the first page at all (if it does not fit).
In the end I'm not interested in printing the page, but rather use wkhtml2pdf to generate a PDF from this HTML. But it is the same issue.
So a webkit only solution would be fine for me.
Here is the HTML / CSS code, if you like to try what could be seen in the image above. Just open the print dialog in Chrome and you should see the same result:
<!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>
Solution
You use page-break-inside with .invoiceTotal.
But its the invoiceTotal that is breaking. Add page-break-inside:avoid to the body.
- Why does 1.0/100.0 == 0.1/10.0 give True?
- How to organize the receive msg and user current input in C network such that it's clean
- Using inclusive scan syntax in OpenMP in the C language
- Unable to understand context in book "OOP in C" by Axel Schreiner
- How to dereference member from struct in which the definition is hid from user?
- variable-length array in struct with TI compiler in C (socket programming)
- A faster way to test 32bpp DDBs for a valid Alpha channel
- How can I compile the zephyr example-application as a freestanding application?
- Why does my forked process sometimes overwrite data in a file?
- Why in C can I initialize more values than the size of an array?
- _Generic in C needs typecasting?
- Declaring/defining an unused variable changes the output from an unrelated variable
- How to use gdb to explore the stack/heap?
- How can I read an input string of unknown length?
- Confused by difference between expression inside if and expression outside if
- Fast Arc Cos algorithm?
- Discrepancy of `unsigned long` size between llvm and gcc in riscv32
- GCC (C) - error: 'x' redeclared as different kind of symbol
- Why does GCC’s static analyser falsely warn that a pointer to an allocated memory block itself stored in an allocated memory block may leak?
- c language gcc compiler *.i file #3 "" 2 what is this?
- How to make clang compile to llvm IR
- Hashtable implementation in C
- EFI variables or config file on the EFI partition for EFI application?
- Pack high bit of every byte in ARM, for 64 bytes like AVX512 vpmovb2m?
- Calling an external C function (in a shared lib) from Perl with Inline::C does not work
- Can a C program detect if its own source code has been modified?
- Is this declaration UB?
- Eclipse C/C++ how to find variable belongs to which struct quickly
- Is this truly best way to delete last element in C?
- flint/arb.h: No such file or directory