Question

我的一个Rails视图中有一些逻辑表明我要打印的table超过7行，在div周围创建一个table min-height样式，以确保此table下方的页脚到达页面2的末尾，而不是第1页。

我在许多浏览器中测试过这种逻辑，包括：Chrome，Safari和IE（！），它们都按预期工作。但是，Firefox正在div和table之前添加一个讨厌的分页符。我试图通过在div以及table：page-break-before: avoid;以及这个较新的Firefox样式break-before: avoid;中添加此CSS样式来避免此分页符，但是在打印过程中似乎不会影响此分页符。还有其他想法吗？ Firefox在打印时会在大div之前自动添加分页符吗？

<div style='min-height: 1150px;'>
    <table>
     blah blah table stuff...
    </table>
</div>

Answer 1

好吧，因为我们没有你的代码的现实例子不幸的是很难指出解决方案，但好消息是我可以提供一些有关它可能有效但不确定的信息。

始终在每个元素之前插入分页符（打印时）。
您不能将此属性用于（空 div ）或使用（ position：absolute; ）。
在使用分页符之前之前，请检查您是否可以使用 break-before 。
在元素之前避免分页（，如果可能），因此无法保证正常工作，这就是为什么我们要求您提供一些实际示例来使用它。
尝试在第二页中使用 page-break-before：inherit; ，直到第二页成为页面第一部分的一部分。（所以如果你有一个桌面托盘，那么知道第一页的最后一部分在哪里，并添加 page-break-before：avoid; ， break-before：avoid; ， break-before：继承; 或 page-break-before：inherit; ）。
如果没有尝试在开头之前使用（ column-break-before：avoid; 或 -moz-column-break-before：avoid; ）第二页或（ column-break-inside：avoid; 或 -moz-column-break-inside：avoid; ）。
如果没有尝试使用 page-break-inside 或 break-inside ，那么制动器可能不在外面。

我希望这可以帮助您解决问题并让我知道它对您最有效。如果您有任何疑问，也请告诉我。

Answer 2

试试此代码，这将解析您的查询

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto; border-collapse: collapse }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Firefox在打印时在大div块之前添加分页符

2 个答案: