CSS - 印刷時の現在のページの末尾を設定します

How to deal with page breaks when printing a large HTML tableのようなFollwingのsimiler quesionsは、私はoppsiteものをしたい、CSSを使用してページエンドポイントを設定する方法があります。例：CSS - 印刷時の現在のページの末尾を設定します

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    .endOfThePage { } //some css to mark as the end of current page in print mode 
    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tbody> 
     <tr> 
      <td>x</td> 
     </tr> 
     <tr> 
      <td>x</td> 
     </tr> 
     <!-- 500 more rows --> 

<tr> 
      <td>x</td> 
     </tr> 
<div class = "endOfThePage"></div> 
<!--some other stuff that will be printed on the next page --> 

    </tbody> 
    </table> 
</body> 
</html>

ので、ユーザは、印刷をクリック終わり（window.print）でページの残りの部分でendOfThePagedivと一つ前の2ページ、1つの部分があるでしょう。

明らかに希望です。

出典

2016-11-13 Itsik Mauyhas

これは役に立ちますか？ http://www.w3schools.com/cssref/pr_print_pageba.asp – itdoesntwork

https://jsfiddle.net/vfocw4Lv/ –

私は何かが欠けていますか？ –

だから私は

@media print { 
    footer {page-break-after: always;} 
}

Working fiddleを使用。

出典

2016-11-14 07:44:14

余分なスタイルシートprint.cssを作成し、このようにそれを含める：このスタイルシートで

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

はposititon:absoluteとPXで余裕でそれを定義します。

出典

2016-11-13 16:54:33 Zer0

https://jsfiddle.net/vfocw4Lv/ - あなたの答えを説明するためにこのフィドルを編集できますか？ –

CSS - 印刷時の現在のページの末尾を設定します

答えて

関連する問題