web-dev-qa-db-ja.com

テーブルの行（tr）に「改ページ」を適用する

W3.orgによると、スタイルpage-break-afterはブロックレベルの要素に適用されます（ http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props ）

<tr>はブロックレベルの要素です（これによると http://www.htmlhelp.com/reference/html40/block.html 、そうです）

私はこれを行っていますが、改ページは印刷時に実際の改ページを作成していません。

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

これは正しい方法ですか？

<tr>はブロックレベルの要素ではありませんでした：この改ページを達成するにはどうすればよいですか

注：beforeコードは単なる例ですが、私がやろうとしていることは、テーブルの5行ごとに改ページを入れることです。そのため、その場合のヒントを知っていれば、高く評価されます。

csspage-break
12
sports

内側<head>、このスタイルを設定

<head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

このようにして、このテーブル行の直前の印刷中に改ページを生成します。

<tr class="page-break">
</tr>
12
guest

参照したサイト は、<tr> "もブロックレベルの要素と見なされる可能性があると記述している containsブロックレベルの要素。」 W3.org も Mozilla docs も、<tr>がブロックレベルの要素であるとは述べていません。

いくつかの可能な解決策

  1. 言い回しとあなたの例に基づいて、セルに真のブロックレベルの要素が含まれていることを確認します。ブロックレベルのテキスト要素である<h1>と<p>を使用した2つの例を次に示します。

    <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

  2. 他の人も同様の問題を報告しており、解決策の1つが役立つかもしれません。

  3. My Lister で述べたように、 印刷アクションをキャッチしようとする または表を分離するページの印刷バージョンを生成して、目的の改ページを取得できます5行ごと。

2
JSuar