Firefoxのテーブル印刷バグ(?)

FirefoxはおおむねきちんとしたCSS解釈をしてくれるのだが、印刷エンジンがかなり頑固だ。Fx2の頃からある問題のようだが、現象としては
・巨大なテーブルを印刷する際ページをまたいで印刷されない(次のページにまたがる部分は消える)
・position:relative;やoverflow:auto;の要素がページをまたいで印刷されない
というもの。
(※テーブルを入れ子にしていても同様の症状が出るらしい)

巨大なテーブルのみの場合、テストデータを作ってみたが正常に印刷されたのでひょっとしたら報告の多くは後者なのかもしれない。(いちおうテーブルが印刷されない場合はheight:100%;をテーブルに指定するとよいとあったという記述をみつけた)一般的なリキッドデザインではテーブル要素はコンテンツの中にあることが多いからだ。
そのため、テーブル要素は自然と多くの親要素に囲まれたDOM的に深い位置に存在することになる。Fxはfloatもうまく印刷してくれないことが多いようで、そのためprint.cssを書くのは相当大変になる。コンテンツから必要な部分だけを抜き出して印刷させるような要求であればよいが、position:relativeが使えないとなるとブラウザのレンダリング通りの印刷はなかなか難しい。そういった要望には
http://gyauza.egoism.jp/clip/archives/2008/08/080823-firefox-print/
このようにdivもtable-cellとしてレンダリングさせるという手法が使えるかもしれない。

この症状は同じような症状が出ても一概にどれが原因と言えず、いくつかの原因が複合的に絡んでいることも多いはず。ざっくりprint.cssで書いて解決しなかったら、firebugで一個一個cssプロパティを変えながら試していくしかない。

position:static !important;
overflow:visible !important;
display:block !important;
float:none !important;
このへんを片っ端から親要素にぶちこんでいく作業になる。
(テーブル関係の要素はdisplay:table、table-cell、table-rawを使う。)

今回は一枚のHTMLが360KBという巨大なAJAXアプリだったので、display:none;で一時的に消している要素も多く、非常に解決が困難だった。しかしそれでもなんとかなったので、うまく印刷されないテーブル要素をきちんと印刷させるところまでは確実にできそうだ。ただ、それがフロート要素の中にある様子をきちんと印刷しろと言われると、上のリンクのような手法を駆使しなくてはいけないのでまた別のテストをしなくてはいけないだろう。