web-appで文書を印刷するCSSとHTMLレイアウトを正しく設定する方法を知りました。システムにはさまざまな文書があります（注文、請求書、配送メモなど）。ヘッダーとフッターがあるマルチページ文書のCSSとHTMLの印刷設定
- 静的ヘッダー（会社のロゴ、連絡先情報）
- 体
- 顧客データ（出荷、請求先住所）
- 項目テーブル（複数の行を持つテーブル、次のことができます。文書はのから成りますスプレッドトラフ数ページ）
- 静的フッタ（免責事項）
私が欲しいのは、印刷機能を以下の通りです：
- 体は、すべてで印刷テーブルヘッダを持っているトラフいくつかのページ
- 項目テーブルを広げた場合、私は、静的ヘッダーとフッターは、各ページ上のプリンタになりたいですそれはより多くのページ
に広がる場合ページは現在、私のHTMLレイアウトは、このようなものです：
<!-- STATIC HEADER -->
<div id="pageHeader">
<table class="table">
<tr>
<td>Static header content here</td>
</tr>
</table>
</div>
<!-- DOCUMENT CONTENT -->
<div id="pageBody">
<!-- Customer data -->
<table class="table">
<tr>
<td>Customer data here</td>
</tr>
</table>
<!-- Items table -->
<table class="table table-condensed table-print">
<thead style="display:table-header-group;">
<tr>
<th>Table header here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows here</td>
</tr>
</tbody>
</table>
</div>
<!-- STATIC FOOTER -->
<div id="pageFooter">
<table class="table">
<tr>
<td>Static footer content here</td>
</tr>
</table>
</div>
this questionの回答に続いてヘッダーとフッターを実行していることについて読んでいましたが、結果が得られません。現在、私のCSSは次のように設定されている：
#pageHeader, #pageFooter { display: none; }
@media print {
#pageHeader { display: block; position: running(pageHeader); width: 100%; }
#pageFooter { display: block; position: running(pageFooter); width: 100%; }
}
@page {
@top-center {
content: element(pageHeader);
}
@bottom-center {
content: element(pageFooter);
}
}
Firefoxは私に完全に奇妙な結果が得られます。それは最初に空白のページを印刷し、次に2ページ目は1ページの文書であればOK、複数ページの文書であれば最初のページのみを印刷し、他のページは無視されます。
Google Chromeはやや優れています。それはすべてのページを印刷しますが、静的ヘッダーとフッターはすべてのページに印刷されません。ヘッダーは最初のページにのみ印刷され、フッターは最後のページにのみ印刷されます。
また、別の問題は、複数のページにまたがって広がることができるメインテーブルが、テーブルが複数のページにわたって広がっている場合、すべてのページにテーブルヘッダーを印刷しないことです。私はの<thead>にあると思っていましたか？
これは実現不可能なのでしょうか、何か完全に間違っていますか？あなたが私にこれをどう扱うかに関するアドバイスや戦略を与えることができれば、私はとても幸せになれます。このアプリケーションは制御された環境で動作しているので、私は1つまたは2つのブラウザに集中できます（ChromeとFirefoxは素晴らしいでしょう）。それは両方のボーナスで動作する場合！
実行中のページヘッダーをシミュレートするChrome互換のメソッドを公開しました** [ここ]（http://stackoverflow.com/questions/19646835/print-repeating-page-headers-in-chrome/25880258#25880258）* *（フッターのサポートはありません）、繰り返しテーブルヘッダーの解決策** [ここ]（http://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed -pages/25737442＃25737442）**。 – DoctorDestructo