I'm attempting to improve the appearance of html documents printed using Webkit, in this case by exerting some control over where page breaks occur.
I'm able to insert page breaks where I need using:
page-break-after: always;
However, I can't find a way to avoid page breaks being inserted in the middle of items. For example, I have html tables that should not be split in the middle across multiple pages. I had the impression that
page-break-inside: avoid;
would prevent a page break from being inserted inside the element, but it doesn't seem to be doing anything. My code looks like:
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
<table class="dontsplit">
<tr><td>Some title</td></tr>
<tr><td><img src="something.jpg"></td></tr>
</table>
Despite the page-break-inside: avoid directive I still get the table split between the first and second row into separate pages.
Any ideas?