table印刷スタイルを調査してみた

前回「Printスタイルで気をつけたい基本的なこと」でプリントスタイルについてざっと気をつけたいことについて紹介しました。その最後にこんな感じの事を言っていたので実際に各ブラウザでPDFとして保存して検証してみました。（本当は印刷してみたかったのですが、家の印刷機が壊れていたのでその代わりとしてPDF保存にしてます...m(_ _)m）

確認観点

今回確認したい観点は以下3点+αです。順番に検証していきます。

検証に使った table は tableのプリントスタイル確認用 に書いたものになります。保存したPDFは左記ページの一番下に掲載しておきました。

1. table の thead と tfoot は改ページしても常に上下固定されるのか？
2. page-break-inside: avoid; を tr にすべきか td / th にすべきか？
3. 背景色印刷できるブラウザとできないブラウザについて。

検証対象は以下の7つになります。

• Windows Chrome(Ver78)
• Windows Edge(Ver44)
• Windows Firefox(Ver70)
• Windows IE(Ver11)
• Mac Chrome(Ver78)
• Mac Firefox(Ver70)
• Mac Safari(Ver13)

1. 印刷時に table の thead と tfoot は改ページしても常に上下固定されるのか？

---

固定されるブラウザ

• Windows Chrome
• Windows Edge
• Windows Firefox
• Windows IE
• Mac Chrome
• Mac Firefox

固定されないブラウザ

• Mac Safari

---

印刷時に Safari 以外で thead と tfoot は固定されました。Safariは注意が必要そうです...。

thead や tfoot の話とは関係ないですが、tdとthのラインの太さが IE・Firefox だと安定しないっぽいです。IEはテーブル内側の縦線が太くなったり、Firefoxではテーブル上下の線が消えたり細くなったりしました。何かのスタイルが影響しているのか...。また、Edge は改ページした時の tfoot 上の border が消えるようです。

---

---

2. セル内で改ページさせたくない場合は page-break-inside: avoid; を th / td につけるべきか tr につけるべきか

---

そもそも改ページ禁止スタイル無しの場合でもセル内で改ページしないブラウザとするブラウザがありました。

page-break-inside: avoid; 指定なしの場合

セル内では改ページしないブラウザ

• Windows Chrome
• Mac Chrome

---

セル内でも改ページするブラウザ

• Windows Edge
• Windows Firefox
• Windows IE
• Mac Firefox
• Mac Safari

page-break-inside: avoid; を th / td につけた場合

セル内では改ページしないブラウザ

• Windows Chrome（そもそも avoid 指定しなくてもセル内で改ページしない）
• Windows Edge
• Windows IE
• Mac Chrome（そもそも avoid 指定しなくてもセル内で改ページしない）

セル内でも改ページするブラウザ

• Windows Firefox
• Mac Firefox
• Mac Safari

page-break-inside: avoid; を tr につけた場合

セル内では改ページしないブラウザ

• Windows Chrome（そもそも avoid 指定しなくてもセル内で改ページしない）
• Windows Edge
• Windows Firefox
• Windows IE
• Mac Chrome（そもそも avoid 指定しなくてもセル内で改ページしない）
• Mac Firefox

セル内でも改ページするブラウザ

• Mac Safari

ということで、tr につけたほうが改ページ禁止をしてくれるブラウザが多いことがわかりました。ちゃんと動作してくれる方法で改ページ禁止したほうがいいかと思いますので、th/td よりも tr につけたほうがいいかと思います。

背景色印刷できるブラウザとできないブラウザについて

背景色を印刷できるブラウザ（設定すれば）

• Windows Chrome
• Windows Firefox
• Windows IE
• Mac Chrome
• Mac Firefox
• Mac Safari

背景色を印刷できないブラウザ（背景色を表示させるための設定項目がない）

• Windows Edge

Edge にはそもそも背景色を表示させるための設定項目がなかったです。

参考サイト

Microsoft Edgeの背景を印刷する方法について。 - マイクロソフト コミュニティ

白文字の色補正について

背景色なしで印刷した時に全ブラウザで白文字補正されるようでした。ブラウザによって補正色が黒文字だったり灰色だったりするのでどのブラウザがどの色か調べてみました。

---

灰色の文字になる

• Windows Chrome
• Mac Chrome
• Windows Edge
• Windows IE
• Mac Safari

黒文字になる

• Windows Firefox
• Mac Firefox

---

最後に

ということで、テーブルの印刷スタイルを書く時に特に気になるブラウザ間の違いについて検証してみました。結構ブラウザ間で挙動が異なるので、表印刷する前提のWebサイトを作る場合は思ってもみないところで改ページされたりしないかなど気をつけていきたいですね。

2019/11/15 追記
上記の印刷検証ではthead/tfootが1行だったのでよかったのですが、2行になる場合はthead/tfootに「page-break-inside: avoid;」指定が必要となります。指定しないと、thead/tfoot の各行を分断して改ページしてしまいます。さらにfirefoxでは表示崩れも見られたので page-break-inside: avoid; 指定しておいたほうが良さそうです。

---