Googleクローム印刷でTableタグのCSSが反映されないトラブル

2018-03-01   

 

ニッチソリューションシリーズです。

表題の件。補足すると

「グーグルクロームで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がテーブルタグを強制的に文字は黒・背景は白に設定してた

以下が俺が困っていた印刷用伝票です。郵便局に提出する差出票。テーブルの行に少しだけグレーの背景色を設定し、備考欄は赤字にしています。

Googleクローム印刷でTableタグのCSSが反映されないトラブル

でも、それをGoogleChromeで印刷するとこんな感じ↓

Googleクローム印刷でTableタグのCSSが反映されないトラブル

印刷以前にクロームのプレビューの段階で既に背景色・文字色のCSS指定が無効化されてます。なのでプリンタードライバー云々以前の問題。

FireFoxのWebDeveloperやChromeのF12でCSSをチェックしても問題解決できずでした。が、ついに原因判明です。まさかのブートストラップが@IMPORTANTで強制的に「印刷時は文字は黒・テーブルの背景は白、しかも強制的に」っていう指定をしてやがりました。

Googleクローム印刷でTableタグのCSSが反映されないトラブル

Googleクローム印刷でTableタグのCSSが反映されないトラブル

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から削除という手段をとりました。

これで解決。テーブルの背景がグレーになって備考欄が赤字になりました!

Googleクローム印刷でTableタグのCSSが反映されないトラブル

 

カテゴリ:

UNITORO以外の最近の投稿

twitter

Recent entries

@title@

両手で持てる!軽量&大容量の36Vエレキ用バッテリー登場

AhmSkABsYQGs8TYv.jpg

初釣りナウ

@title@

松田聖子聴きながら仕事してたらSMEに怒られたw YouTube恐るべし!

@title@

ミンコタのオウトレックス?アルトレックス?ウルトレックス?

@title@

Maybe I am not become a driverとGoogle自動広告

_7emfaLSBx4CCWKI.jpg

これぞ高級車!

@title@

多々良沼と近藤沼に行ってきた

@title@

群馬フィッシングショー2018で2ピーススピニングバスロッドを物色してきた

5mHxIK3o9aFJCNmd.jpg

今日の阿部進吾

@title@

今日のLEDテープライト。グミの防水カバーを剥がして軽量化

@title@

新型シビック(セダン)がカッコイイ

HMcKKKWPwoPEndkk.jpg

emailが死んだ今、一周回ってSMSが連絡手段に最適かもしんない

TgKK_DPCmKgEOrO7.jpg

埼玉秩父の宝登山蝋梅と道の駅あらかわのうり坊

7aEUWLVMM_3XlVy4.jpg

育てて♪食べよう♪『リラックマサラダボウルセット』を8ヶ月かけて育てて食べた

kqldLymPBHe1cov8.jpg

中型SUVなんてラビッシュだ

4Vd7oEtcKo2YKGzD.jpg

釣りの生中継を自宅のリビングTVでまったり見る

EOm_TtM9zEY3EAHy.jpg

デミオのほんのり室内LEDライトアップ化完了

4Ozy0b4ue2J_gO3D.jpg

深夜の行くあてもないドライブ

8HdbItPDtpJfICsZ.jpg

インターネットが遅すぎた問題はJ:COMのケーブルTVで解決した

732ftltgOKidp2vh.jpg

映画のエキストラを初体験してきた

Ib4WVMzS_DIB5pYK.jpg

「今日のエーモン&LED」クルマのダッシュボードに小物をくっつける

RW58rkWBM1VnGlKh.jpg

続・インターネットが遅すぎてUQモバイル15日間お試し中だけど・・(追記あり:全然ダメだった)

b3wTofVnX6_wFJRN.jpg

電線の皮をむくだけの工具を買って感動したw

zvfdlyY8b0asVwh7.jpg

食べログ全国No.1のかき氷!熊谷「慈げん」に行ってきた

PwZyfPquBciTnbRd.jpg

無人のトラック運転が日本でも実現間近か?

AIAQpFdJjm5f0bKB.jpg

神流湖にドライブ&これでいいのかバス業界

4mYSX8XxkTwjVoOl.jpg

ロシアン美女からのスパムに返信してみた結果

mhWxe1wMJkqAYueY.jpg

ガソリン版CX-3にちょっとだけ乗ってみた

M_8YUdDcnZyS3tVJ.jpg

デミオにもアンビエントライトをつけたい!

tuAzOfwZcX7pLm6Z.jpg

全ての釣り人におすすめ!ラゲッジルームのLEDテープライト化

Category

Popular entries 2016

Popular entries 2015