こんにちは永田です。
晴れたり曇ったり不安定な天気が続きますね。湿気も多く蒸し暑い時期なのでそろそろ食中毒にも気を付けたいところです。

さて、今回は珍しく技術系の内容です。というか自分がハマった部分の備忘録を兼ねて記事にしてみました(笑)

とある案件で「ブラウザで印刷専用画面を表示しそのままプリントアウト」というものがあったんですが、印刷プレビューするとthに設定しているはずの背景色が全く反映されないという状況に。
chromeもfirefoxも、どちらもそれぞれ「背景色を印刷する」にチェックを入れているのに何故…

デバッグツールで調べてみると、Bootstrapの「@media print」が余計なお世話をしているようで。

@media print{
th {background-color:#fff!important;}

という「印刷の時のth背景色は絶対白！」という主張をしていたせいでした。
別cssでの上書きが何故か効かなかった（なんでだ）ため、直接bootstrap.cssを書き換えるという無理矢理であまりよろしくはない方法で対応…
例えば今回の例でいうと。

@media print{
th {background-color:#fff!important;}

となっているところを

@media print{
th {background-color:transparent;}

と書き換えたら、別cssで設定しているbackground-colorが適応され無事（？）解決。

この背景色が印刷されない問題、前にもハマった記憶があるので忘れないためにも書き記しておこうと思います。
もっとスマートな方法があるんだろうなぁと思いつつ…（あったらこっそり教えてください…）

ではこのへんで！