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

質問

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

回答No.3

himajin100000 · ベストアンサー

できれば簡素化されたテストケースくれ
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​も気になっている

お礼

ご回答ありがとうございます。

「簡素化されたテストケース」ですが、申し訳ありません！
時間がないのでまた今度でお願いします...

教えてくださったサイトですが、こんなサイトがあるのですね。
知りませんでした。ありがとうございます。
しかしながら、いざ見に行ってみるとちんぷんかんぷんでした。
せめて英語がもうちょっと分かればいいのですが。

で、
＞floatされたdivの中に表があるとき表の内容が切られる
ですが、いかにもこの状態でして、ためしにdivのfloatを解除してみると、ちゃんとプリントアウトされました！
もちろん全体の表示自体はおかしなことになってしまいますので、印刷専用のスタイルシートを作って力技で何とかしようと思います。
本当にありがとうございました。

補足

「簡素化されたテストケース」ですが、
https://bugzilla.mozilla.org/show_bug.cgi?id=324956
にあるものと同じでいいと思います。
しかし、読んでも結局よく分からないんですよねぇ...
結局対処法は見つかったのか、バグとして認定されただけなのか...

回答No.7

kuzumiHK

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

お礼

いつもありがとうございます。
どこまでソースの状態をキレイに保ったまま
クライアントの要望に従うかはむずかしいところですね。
本当にありがとうございました。

回答No.6

kuzumiHK

お返事ありがとうございます。
overflowやfloat以外に思いつかないため、
以下のような手順でやってみてはいかがでしょうか。

(1)まず、実際に印刷してもそうなるのかを確認していただく。
（プレビューだけのバグの可能性）

(2)ヘッダ～フッタ間のコンテンツをすべて取り除き、
その状態でプレビューしてもフッタが次ページになるかどうか。
もしなれば、ヘッダの記述に問題があるので、
ヘッダのスタイルを一度コメントアウトしてみる。

(3)もし(2)で問題がなければ、コンテンツ内か、
ヘッダとコンテンツの組み合わせの問題なので、
コンテンツをブロック要素ごとに分けて、少しづつ追加してみる。

原始的な方法ですが、
そういった感じで原因を狭めていくしかなさそうです。
あまり参考にならなくてすみません。

お礼

いつもありがとうございます。
とても参考になります。

回答No.5

kuzumiHK

>しかし、テーブルは2ページ目（紙）の頭から印刷され始め、1ページ目（紙）には膨大な空白が...。
>これはこれでまた違う話になるのでしょうね。

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

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

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

お礼

お礼が遅くなってしまって申し訳ありませんが、
何度も丁寧なご回答ありがとうございます。

>floatの解除の問題のような気がするので

ということですので、いろんなところに"clear:both"を指定してみましたが、どうもうまくいきません。
overflowの設定はありません。
どうにもやっかいですねえ・・・

とりあえずクライアントには「印刷関係は難しいんです」みたいなので納得してもらえそうなのですが・・・

回答No.4

kuzumiHK

No.2です。すでに一定の解決がなされているようですが、
FireFoxのtableが途切れる印刷バグを回避する方法が見つかりましたので、
ご報告させていただきます。

tbodyを使います。
通常はtbodyを使う場合でも、
下記のように<thead>や<tfoot>以外の部分を、
まとめてグループ化するために使うと思いますが、

<tbody>
<tr><td>ああああああ</td></tr>
<tr><td>ああああああ</td></tr>
<tr><td>ああああああ</td></tr>
</tbody>

回避する方法というのは、
下記のように行ごとにtbodyで囲う方法です。

<tbody>
<tr><td>ああああああ</td></tr>
</tbody>
<tbody>
<tr><td>ああああああ</td></tr>
</tbody>

つまり、すべての<tr>の外側に<tbody>（もしくは<thead>か<tfoot>）がつくということです。

１行に表示された項目をひとつのグループにすると言う意味で、
論理的な説明もつきますし、
W3Cのサイトでも調べてみたところ、
例文にそのように使い方がなされているページも発見しました。

http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY

lintチェックにおいても、特に問題は指摘されませんでした。

trごとにtbodyを指定しなければならない点が少し面倒ですが、
ページをまたぐ可能性がある場合のみ反映することで解決できるかもしれません。

お礼

ご回答ありがとうございます。
<tbody>なんてタグ自体知りませんでした。
早速試させていただいたところ、きれいにテーブルがページをまたいで印刷されました！
しかし、テーブルは2ページ目（紙）の頭から印刷され始め、1ページ目（紙）には膨大な空白が...。
これはこれでまた違う話になるのでしょうね。
いずれにせよ、kuzumiHK様、本当にありがとうございました。
ところでこの<tbody>は<thead>や<tfoot>なしでも使ってよいものなのでしょうか...？

回答No.2

kuzumiHK

下記のような印刷専用のスタイルシートを追加して、
整形しなおしてみてはいかがでしょうか。

<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が直書きにされている場合や、
スペーサーなどを多用している場合は、指定が混在するため、
うまくいきにくいかもしれませんが・・・

お礼

ご回答ありがとうございます!
「widthの％指定」、早速ためさせていただきました。
...しかし、結果は変わらずでした...
styleの直書き、スペーサー、ともに使用しておりません。
ページ全体の「width」を「％指定」しなくちゃいけないわけではないですよねえ...？
しかしながら勉強になりました。ありがとうございます！

回答No.1

yyfront

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

お礼

ご回答ありがとうございます。
FireFoxの印刷機能にはいろいろ不備があるようですね。
クライアントにもそういいたいところです。
今回の件については、ひょっとしてtableは途中で切れちゃうバグでもあるのかな、とも思ったのですが、いろんなサイトを見る限りそうではないようです。
なんとか原因・対処法を見つけたいです。