Question

我的应用程序应支持所有现代浏览器。所需的最低IE版本是IE9。

我创建了一个可以打印的非常基本的页面。在页面上，有一张桌子。每行包含有关文章的一些信息，包括条形码。

打印此页面时，页面上的最后一行部分位于一页上，部分位于另一页上。更糟糕的是，条形码分为两页（条形码是以特殊字体显示的数字）。

我看过page-break-inside。这是我目前的代码：

<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;
}

（不要介意丑陋的内联风格，仅用于测试目的）

这根本不起作用。我已经看过类似的问题了，我已经尝试了不同的解决方案，比如把数据放在td（这就是为什么他们在那里）和在这些div上使用page-break-inside，在行上使用page-break-inside，......但是，这些解决方案似乎都没有做任何事情。

我和一位同事一起讨论过这个问题，他认为我无法做到这一点，实际上可以做到这一点。

这是真的吗？我做的事情不可能吗？如果没有，为什么这不起作用？

Answer 1

使用一些css魔法为您提供解决方案。

像，

table tbody {
  position: fixed;
  bottom: 0;
  top: /* your desired value.*/ 
}

可打印页面的{page-break-inside}

1 个答案: