この問題は、多くのブラウザー (印刷時) でデフォルトで無視される "background-color" および "background-image" プロパティに関連していると思います。
Chrome の場合、次のコードを印刷 CSS に追加できます。Firefox と IE では、印刷ダイアログで「背景を印刷」を選択する必要があります。
:root {
-webkit-print-color-adjust: exact;
}
編集：代替アプローチ
プリンターでも読み取り可能な情報を提供する方法を探しているので、そのためだけに特定のコンテンツを提供できます。
あなたのHTMLで：
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
あなたのスタイルシートで：
@media screen,print
{
.blue_border {border: 1px solid #00F;}
}
@media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
@media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
画像も作成する必要があります。アイデアは、背景をいくつかの小さなスプライト、またはプリンターでのみ代替テキストに置き換えることです。これはどのブラウザでも動作します
色付きのボックスが表示されない理由は、色が を介して適用されるためbackground-colorです。これは、過去に HTML を印刷する際の問題の主な原因の 1 つでした。そのため、多くのブラウザーは背景色と画像を無視して、印刷物を読みやすくしています (テキストが「グレー」領域の上にある場合、白黒プリンターではテキストが読みにくくなります)。 ）。
あなたの場合、テキストがないため、これは問題です。
Chrome で背景色の印刷をオンにする方法を説明する質問があります。他のブラウザには、印刷ダイアログにオプションがあります。
または、ページを PDF ファイルに「印刷」してから、PDF ビューアーを使用して印刷します。この場合、ブラウザはバックグラウンド設定を保持することがあります。
印刷時にブラウザが背景色を抑制しているかどうかを確認してください。