フッタのある表をOperaで印刷すると、レイアウトがずれる場合がある

HTML 4では、表の行グループとしてthead(表ヘッダ)、tfoot(表フッタ)、tbody(表本体)が定義されていますが、仕様書にはこんな記述があります。

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

Tables in HTML documents:http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3(W3C)

つまり、表本体のデータが膨大なケースを考えて、表フッタは表本体より前に書くべきだと言っています。しかし、仕様どおりに書くといくつか問題があって、tfoot要素、あるいはtable要素自体に対応していないブラウザでは、HTMLの記述順どおり、本体より前にフッタが表示されてします。具体的には、Lynxなどのほか、いくつかの携帯電話でもこのような症状になってしまいます。

  • このような事情を考慮してか、HTML5では、表フッタを表本体の後に記述することも可能になるようです。

ところが、Operaの最新版(10.10)でも不具合が起こることを確認しました。画面表示では問題ないのですが、印刷を行うとレイアウトがおかしくなることがあります。具体的には、

  • 仕様どおり、表フッタを表本体の前に書いている。
  • 行が多く、1つの表が2ページ以上にまたがっている。

という場合に、表フッタが本来あるべき位置より上になってしまい、表本体と重なってしまいます。

  • とはいえ、上の条件を満たすと必ずずれるのかというと、そうはならない場合もあり、再現条件がいまいち分かりません…。

…と、文字で書いても分かりにくいでしょうから、イメージを。

まずは、表フッタを表本体の前に書いた場合の印刷プレビュー。グレーな背景の行が表フッタなのですが、表の後に続く部分(この例では「56件ヒットしました。」という文章)も含めて、表本体と重なってしまっています。

サムネイル画像
表フッタを表本体の前に書いた場合の印刷プレビューオリジナル画像

表フッタを表本体の後に書くと、想定どおりのレイアウトになります。

サムネイル画像
表フッタを表本体の後に書いた場合の印刷プレビューオリジナル画像

とくにモバイル環境や印刷を重視したコンテンツを作成するならば、仕様に準拠せず表フッタは表本体の後に書く方がよいのかもしれません。