# 「レコードを印刷」から印刷した際、一部スタイルが反映されない

**URL:** <https://community.cybozu.dev/t/topic/7525>\
**Category:** kintone 開発相談\
**Created:** [2021 年 5 月 17 日午前 6:33 UTC](https://community.cybozu.dev/t/topic/7525 "2021-05-17T06:33:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account306](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@Legacy\_Account306](https://community.cybozu.dev/u/Legacy_Account306)\
**Post date:** [2021 年 5 月 17 日午前 6:33 UTC](https://community.cybozu.dev/t/topic/7525/1 "2021-05-17T06:33:09Z")

</div>

**背景・実現したいこと**

kintoneの「レコードを印刷」から印刷プレビューを出した際、プリント用に設定したCSSのうち「 background-color」のみ白くなってしまい反映されません。またPDFにて実際に出力しても結果は同じです。  
試しに同じ箇所にテキストの文字色を指定して見ましたが、こちらは反映されています。  
何が原因なのか、また対策がございましたらご指南ください。  
【関連質問】[レコード内に埋め込んだHTMLをプリントしたい](https://community.cybozu.dev/hc/ja/community/posts/900003352583-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E5%86%85%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%93%E3%81%A0HTML%E3%82%92%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%E3%81%97%E3%81%9F%E3%81%84)

**利用したソースコード（CSS）**

```
#output table {
border-collapse: collapse; /* セルの線を重ねる */
}

#output tr:nth-child(odd) {
background-color: #ddd; /* 背景色指定 */
color: #00f;
}

#output th,td {
padding: 10px 30px; /* 余白指定 */
}

@media print {
#output table {
border-collapse: collapse; /* セルの線を重ねる */
}

#output tr:nth-child(odd) {
background-color: #ddd; /* 背景色指定 */
color: #00f;
}

#output th,td {
padding: 10px 30px; /* 余白指定 */
}
}

```

### 現状の印刷結果

期待する印刷結果

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 5 月 17 日午前 6:38 UTC](https://community.cybozu.dev/t/topic/7525/2 "2021-05-17T06:38:33Z")

</div>

ookawaki\_devさん

お世話になっております。

下記などが参考になるかと思います。

[https://hacknote.jp/archives/11460/](https://hacknote.jp/archives/11460/)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account306](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@Legacy\_Account306](https://community.cybozu.dev/u/Legacy_Account306)\
**Post date:** [2021 年 5 月 17 日午前 6:54 UTC](https://community.cybozu.dev/t/topic/7525/3 "2021-05-17T06:54:02Z")

</div>

@江田篤史 様

早速のご回答ありがとうございます。  
いただいたリンク先の情報を参考に（１）〜（３）の情報を試してみたところ、無事背景色まで反映することができました。  
大変助かりました。

当方環境がChromeだったため、CSSに以下の記述が必要だったようです。

```
body {
**-webkit-print-color-adjust: exact;**
}

th {
background-color: #eee **!important** ;
}

```