11

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

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

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

2 回答 2

3

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

  1. 始终在每个元素之前插入分页符（打印时）。
  2. 您不能将此属性用于（一个空的div）或用于（position:absolute;）。
  3. 在使用page-break-before 之前，请检查是否可以使用break-before代替。
  4. 避免在元素之前分页（如果可能的话），因此不能保证有效，这就是为什么我们要求您提供一些使用它的活生生的例子。
  5. 尝试使用page-break-before：继承；在第二页到第二页之前，您是该页第一部分的一部分。（因此，如果您有一个桌面托盘来知道第一页的最后一部分在哪里，并添加page-break-before: 避免；，break-before：避免；，break-before：继承；或page-break-before：继承；）。
  6. 如果不尝试在第二页开始之前使用（column-break-before：避免；或-moz-column-break-before：避免； ）或（ column-break-inside：避免；或-moz-column -break-inside：避免；）。
  7. 如果不尝试使用page-break-inside或break-inside，则可能刹车在内部而不是外部。

我希望这将帮助您解决您的问题，并让我知道它最适合您。如果您有任何问题，也请告诉我。

于 2015-06-10T04:54:03.740 回答
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>
于 2015-06-10T10:49:13.223 回答