HTML+CSSでレポートを作ろうとしています。私のテンプレートには、ヘッダー、コンテンツ、およびフッターが含まれています。基本レポートとして、すべてのページでヘッダーとフッターを繰り返したい。
私のCSSは次のようになります。
ヘッダ：
@media print {
div.report-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 2px solid #000034;
}
}
フッター:
@media print {
div.report-header {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 2px solid #000034;
}
}
考えられるバグとして、Firefox ではレポートが正常に機能し、すべてのページでヘッダーとフッターが繰り返されますが、Chrome ではヘッダーが最初のページにのみ、フッターが最後のページにのみ存在します。
テーブルの使用など、多くのチュートリアルを試しました。
@media print {
thead { display: table-header-group; width: 100%; background: red;}
tfoot { display: table-footer-group; width: 100%; background: green;}
}
しかし、結果は同じで、Firefox は問題なく動作しますが、Chrome は動作しません。この簡単なレポートを作成するにはどうすればよいですか? そのようなことをするプラグインはありますか？
Chrome バージョン 24.0.1312.70 を使用しています。