プリントアウト時、ページ内容が抜けてしまうのです。

Question

HTMLを印刷すると、長いページは分割されて出てきますよね？
FireFoxでのプリントアウト時、このページ間（紙）で途中の内容が抜けてしまって困っています。
HTMLにはテーブルで作られた大きな表組みが縦に二つ連続してありまして（table1、table2とします)、
一枚目（紙）には「table1」の途中までが印刷され、二枚目は「table2」の頭から印刷、という具合になってしまうのです。
原因・対処方法などご存知の方、いらっしゃいませんでしょうか。
ちなみに、私自身がプリントアウトしたいのではなく、
クライアントになんとかしろといわれて困ってますので、よろしくお願いいたします。

himajin100000 · Accepted Answer

できれば簡素化されたテストケースくれ
http://www.mozilla-japan.org/newlayout/bugathon.html

テストケースが無い以上，原因は良く判らんが，苦しい時のBugzilla頼みしてみたら
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=print+truncate

When a large table is printed, it is truncated to the first page
大きな表が印刷される時，その内容が初めのページで切られる。
https://bugzilla.mozilla.org/show_bug.cgi?id=369140

とか

Print & Print Preview truncate tables over 1 page long (with or without a caption) 
1ページ以上にわたる表を印刷しようとすると切られる
https://bugzilla.mozilla.org/show_bug.cgi?id=425414

とか
 table content truncated on second page of print when contained within floated div
floatされたdivの中に表があるとき表の内容が切られる
https://bugzilla.mozilla.org/show_bug.cgi?id=324956

とか。

未だ読んでないけど怪しそうなものが。

あと
http://oshiete1.goo.ne.jp/qa3453338.html
の時のBug 263032​も気になっている

kuzumiHK · Answer

ぱらぱらとすみません。
ソースを拝見していないので想像の範疇ですが、
tableが長すぎる（1ページを超える）と普通に改ページになりますので、
その場合はtableを分割したほうがいいかもです。
さもひとつのテーブルかのようにスタイルを指定するなど・・・

kuzumiHK · Answer

お返事ありがとうございます。
overflowやfloat以外に思いつかないため、
以下のような手順でやってみてはいかがでしょうか。

(1)まず、実際に印刷してもそうなるのかを確認していただく。
（プレビューだけのバグの可能性）

(2)ヘッダ～フッタ間のコンテンツをすべて取り除き、
その状態でプレビューしてもフッタが次ページになるかどうか。
もしなれば、ヘッダの記述に問題があるので、
ヘッダのスタイルを一度コメントアウトしてみる。

(3)もし(2)で問題がなければ、コンテンツ内か、
ヘッダとコンテンツの組み合わせの問題なので、
コンテンツをブロック要素ごとに分けて、少しづつ追加してみる。

原始的な方法ですが、
そういった感じで原因を狭めていくしかなさそうです。
あまり参考にならなくてすみません。

kuzumiHK · Answer

>しかし、テーブルは2ページ目（紙）の頭から印刷され始め、1ページ目（紙）には膨大な空白が...。

>これはこれでまた違う話になるのでしょうね。

floatの解除の問題のような気がするので、
floatを反映しなくていい箇所のブロック要素に、
clear:bothを設定してみるですとか、
overflowなどを設定されている場合は、
print.cssなどに印刷のみoverflow:visible;に戻してみるなど、
怪しい箇所に入れてみて試すしかなさそうです。
<table style="clear:both;">

>ところでこの<tbody>は<thead>や<tfoot>なしでも使ってよいものなのでしょうか...？

こちらは省略可能なタグだったと記憶しています。
表をわかりやすくするためのタグで、
どこが項目で、どこがひとつのグループなのかなどが、
わかりやすくなり、より親切な設計になると思います。

kuzumiHK · Answer

No.2です。すでに一定の解決がなされているようですが、 FireFoxのtableが途切れる印刷バグを回避する方法が見つかりましたので、ご報告させていただきます。 tbodyを使います。通常はtbodyを使う場合でも、下記のようにや以外の部分を、まとめてグループ化するために使うと思いますが、ああああああああああああああああああ回避する方法というのは、下記のように行ごとにtbodyで囲う方法です。ああああああああああああつまり、すべてのの外側に（もしくはか）がつくということです。１行に表示された項目をひとつのグループにすると言う意味で、論理的な説明もつきますし、 W3Cのサイトでも調べてみたところ、例文にそのように使い方がなされているページも発見しました。 http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY lintチェックにおいても、特に問題は指摘されませんでした。 trごとにtbodyを指定しなければならない点が少し面倒ですが、ページをまたぐ可能性がある場合のみ反映することで解決できるかもしれません。

kuzumiHK · Answer

下記のような印刷専用のスタイルシートを追加して、
整形しなおしてみてはいかがでしょうか。

<link rel="stylesheet" type="text/css" href="print.css" media="print">
（media="print"を指定しておけば、
ブラウザ上の見た目が変わることはありません）

tableがページをまたぐ場合は、
widthを％で指定しなおすと直ることが多いようです。

該当のtableにidかclass（例えばid="maintable01"など）を振って、
print.css内に、table#maintable01{width:100%;}のようにします。
もし、元のhtmlのタグにstyleが直書きにされている場合や、
スペーサーなどを多用している場合は、指定が混在するため、
うまくいきにくいかもしれませんが・・・

yyfront · Answer

FireFoxの印刷機能には、不備があるのではないでしょうか。
私も以前印刷しましたが、どれだけ縦に長いページでも
最初の一枚だけしか印刷しませんでしたので
印刷したいときは、ＩＥを使いました。

プリントアウト時、ページ内容が抜けてしまうのです。

できれば簡素化されたテストケースくれ

この回答への補足

ぱらぱらとすみません。

お返事ありがとうございます。

>しかし、テーブルは2ページ目（紙）の頭から印刷され始め、1ページ目（紙）には膨大な空白が...。

No.2です。

下記のような印刷専用のスタイルシートを追加して、

FireFoxの印刷機能には、不備があるのではないでしょうか。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング