Page-break-inside for printable page
My application needs to support all modern browsers. The minimum IE version required is IE9.
I created a very basic page that can be printed. There is a table on the page. Each line contains some information about the article, including a barcode.
When you print this page, the last line of the page is partly on one page, partly on another. Even worse, the barcode is split between two pages (a barcode is a number displayed in a special font).
I looked page-break-inside
. Here is my current code:
<div class="col-xs-12">
<div class="row">
<p class="text-center">Liste de prix</p>
<table class="table borderless">
<thead>
<tr>
<th class="col-xs-4">Description</th>
<th class="col-xs-2">Prix / tige</th>
<th class="col-xs-2">Taille</th>
<th class="col-xs-4">Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="article in vm.data.articles">
<div><td>{{ article.description }}</td></div>
<div><td>{{ article.unitPrice }}</td></div>
<div><td>{{ article.length }}</td></div>
<div><td style="font-family: barcode, arial; font-size: 225%;">{{ article.itemNumber | barcode }}</td></div>
</tr>
</tbody>
</table>
</div>
</div>
css:
tr {
page-break-inside: avoid;
}
(Don't mind the ugly inline style that's for testing purposes only)
It doesn't do anything. I've looked at similar questions and I've tried different solutions, like putting a div around the td (why are they there) and using page breaks on those divs using page breaks on lines ... still none of these solutions do anything ...
I discussed this issue with a colleague and he believes that there is nothing I can do to actually make this work.
It's true? Am I doing something impossible? If not, why doesn't it work?
source to share