html - 行数の多いテーブルを印刷するために CSS 改ページを適用する方法は?

Question

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

score 152 · Accepted Answer

以下を使用できます。

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

詳細については、W3C のCSS 印刷プロファイル仕様を参照してください。

score 15 · Accepted Answer

私はこれを修正するために周りを見回しました。最終的な印刷ページがあり、数十ページを組み合わせたjqueryモバイルサイトがあります。上記のすべての修正を試みましたが、機能する唯一の方法は次のとおりです。

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

score -1 · Accepted Answer

次に例を示します。

CSS 経由:

<style>
  .my-table {
    page-break-before: always;
    page-break-after: always;
  }
  .my-table tr {
    page-break-inside: avoid;
  }
</style>

または要素に直接：

<table style="page-break-before: always; page-break-after: always;">
  <tr style="page-break-inside: avoid;">
    ..
  </tr>
</table>

9 に答える 9