11

Railsビューの1つに、table印刷しようとしている行が7行を超えているかどうかを示す少しのロジックがあり、スタイルでdiv周りに作成して、この下のフッターがページ2の最後になるようにします。 1ページではなく。tablemin-heighttable

Chrome、Safari、IE (!) を含む多くのブラウザーでこのロジックをテストしましたが、すべて期待どおりに動作します。divただし、Firefox は、 andの直前に厄介な改ページを追加していますtable。この CSS スタイルをdivとtable: page-break-before: avoid;、およびこの新しい Firefox スタイル: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: inherit;を使用してみてください。2 番目のページで 2 番目のページまで、あなたはページの最初の部分の一部です。、break-before: avoid;、break-before: inherit;またはpage-break-before: inherit; )。
  6. 2 ページ目の開始前に( column-break-before: avoid;または-moz-column-break-before: avoid; ) または ( column-break-inside: avoid;または-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 に答える