Ensuring my application is compatible with all modern browsers is a top priority for me. It is essential that the minimum version of Internet Explorer supported is IE9.
I recently constructed a simple print-friendly page containing a table which displays information about various articles, including unique barcodes.
The challenge arises when attempting to print this page as the final row spills onto two separate pages, causing the barcode number to split between them due to its special font style.
In an effort to resolve this issue, I explored the implementation of page-break-inside. Here is the current code snippet:
<div class="col-xs-12">
<div class="row">
<p class="text-center">Price List</p>
<table class="table borderless">
<thead>
<tr>
<th class="col-xs-4">Description</th>
<th class="col-xs-2">Price / unit</th>
<th class="col-xs-2">Size</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;
}
(Please disregard the temporary inline styling added purely for testing)
To my disappointment, none of these solutions seem to address the printing dilemma. Despite consulting colleagues, one even suggesting the impossibility of achieving success with this scenario.
Is there truly no feasible solution to this problem? Could it be that what I am aiming for is unattainable through conventional means? If not, why does the implemented approach fail to deliver the desired outcome?