web-dev-qa-db-ja.com

多くの行を含むテーブルを印刷するためにCSSの改ページを適用する方法は？

Webページに動的テーブルがあり、多くの行が含まれることがあります。 page-break-beforeおよびpage-break-after CSSプロパティがあることを知っています。必要に応じて改ページを強制するために、コードのどこに配置しますか？

htmlcssprintingcss-tablespage-break
68
Mohammad Saberi

以下を使用できます。

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

詳細については、W3Cの CSS Print Profile 仕様を参照してください。

また、 Salesforce開発者フォーラム も参照してください。

116
Hemant Metalia

tableまたはtrのいずれかのブレークを適用する場合は、exのクラスを指定する必要があります。 page-break以下のCSSを使用：

/* class works for table row */
table tr.page-break{
  page-break-after:always
} 

<tr class="page-break">

/* class works for table */
table.page-break{
  page-break-after:always
}

<table class="page-break">

必要に応じて機能します

または、同じものに対してdiv構造を持つこともできます。

CSS：

@media all {
 .page-break  { display: none; }
}

@media print {
 .page-break  { display: block; page-break-before: always; }
}

Div：

<div class="page-break"></div>
19
Aditya P Bhatt

私はこれに対する修正を探しました。最終的な印刷ページを持つjqueryモバイルサイトがあり、それは何十ものページを組み合わせています。上記のすべての修正を試しましたが、作業できるのはこれだけです：

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>
12
Scotty Rogers

残念ながら、Chromeでは上記の例はうまくいきませんでした。

各ページのPXで最大高さを指定できる以下のソリューションを思い付きました。これにより、行がその高さに等しい場合、テーブルが個別のテーブルに分割されます。

$(document).ready(function(){

    var MaxHeight = 200;
    var RunningHeight = 0;
    var PageNo = 1;

    $('table.splitForPrint>tbody>tr').each(function () {

        if (RunningHeight + $(this).height() > MaxHeight) {
            RunningHeight = 0;
            PageNo += 1;
        }

        RunningHeight += $(this).height();

        $(this).attr("data-page-no", PageNo);

    });

    for(i = 1; i <= PageNo; i++){

        $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");

        var rows = $('table tr[data-page-no="' + i + '"]');

        $('#Table' + i).find("tbody").append(rows);
    }
    $('table.splitForPrint').remove();

});

また、スタイルシートには以下が必要です

    div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }
8
Jay1b

これは私のために働いています：

<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

このスレッドから： テーブルの行内で改ページを避ける

0
Alan

1ページに必要な数がわかっている場合は、いつでもこれを行うことができます。 20項目ごとに新しいページが開始されます。

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}
0
quemeful