Googleクローム印刷でTableタグのCSSが反映されないトラブル
ニッチソリューションシリーズです。
表題の件。補足すると
「グーグルクロームでwebページをカラープリンタで印刷したけども、思い通りのカラーにならない」
「グーグルクロームでwebページをカラープリンタで印刷したけども画像はカラーで印刷されるけど文字が黒で印刷される」
「グーグルクロームでwebページをカラープリンタで印刷したけども、テーブル（表）の背景が全部白、文字は真っ黒、そうCSSが反映されない」
これくらいキーワード埋めれば同じ問題で困っている人に拾ってもらえるかな？(*´ω｀*)
俺もこの問題は1年以上解決できずでした。
定番の解決方法である
body{
-webkit-print-color-adjust: exact;
}
をやってもダメ。そもそも画像部分はちゃんとカラー印刷されるけど、テーブルタグの中にだけCSSが効かないという怪奇現象。でも、ようやく解決方法を発見しました。
Bootstrapが悪さしてた
です。bootstrap？なにそれ？っていう人は印刷がおかしいページのソース冒頭付近を見て「bootstrap」という文字を探してみてください。
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous"
↑こんな感じでbootstrapという文字がソースに存在するならば、この問題の原因はそれです。システム管理者やホームページ管理者に「ブートストラップが原因だそうです」ってって報告してください(*´ω｀*)
では詳しく見ていきます。
Bootstrapがテーブルタグを強制的に文字は黒・背景は白に設定してた
以下が俺が困っていた印刷用伝票です。郵便局に提出する差出票。テーブルの行に少しだけグレーの背景色を設定し、備考欄は赤字にしています。
でも、それをGoogleChromeで印刷するとこんな感じ↓
印刷以前にクロームのプレビューの段階で既に背景色・文字色のCSS指定が無効化されてます。なのでプリンタードライバー云々以前の問題。
FireFoxのWebDeveloperやChromeのF12でCSSをチェックしても問題解決できずでした。が、ついに原因判明です。まさかのブートストラップが@IMPORTANTで強制的に「印刷時は文字は黒・テーブルの背景は白、しかも強制的に」っていう指定をしてやがりました。
bootstrap3.5.5の場合191行目から始まる@media printの括りの中に
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
↑＊＝全ての要素のcolorは#000（黒）強制っていう指定があり、少し下に
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
↑.table tdと.table thの背景は白に強制、ついでに罫線はグレーで1ピクセル実線に強制
って指定されてます。
何故こんな指定、しかも!important付きで？？Why?
なお、Bootstrap4でも同じ指定でした。
PS:Bootstrapを使っててもTableタグでtableクラスを指定してなければ適用されません。class="table table-striped table-bordered">
解決方法：Bootstrapの該当箇所を消せばOK
俺の場合、BootstrapはCDN版を読んでいることが多いけど、それだと当然書き換えはできません。なので、ちょっと面倒だけど印刷ページ専用でBootstrapを自分のサーバーに設置。該当箇所を削除することによって問題が解決しました。自分のCSSの上書きでもできそうだけど!important;を付けられているし、backgorund-colorが複数色あったりで面倒なので、上書きではなく元のBootsrapから削除という手段をとりました。
これで解決。テーブルの背景がグレーになって備考欄が赤字になりました！
カテゴリ:PC・スマホ・WEBネタ
