CSSのみでテーブルセルの背景色を印刷する方法
Print the table cell with color only with CSS
HTMLの背景色。Chromeでは「-webkit-print-color-adjust:exact;」というCSSで強制的に印刷させることが出来ますが、Microsoft Edgeではユーザーが明示的に背景の印刷を指定しないと、background-colorプロパティーは反映されません。JavaScriptを使えば、Canvasやimgを動的に描画・生成してセルに重ねる方法もありますが、テーブルセルのような小さな枠であれば、以下のように太い内枠を描いた矩形を重ねることで代用が出来ます。
print.html
<style>
th{
position:relative;
overflow:hidden;
}
th .bg{
position:absolute;
left:0;right:0;top:0;bottom:0;
box-sizing:border-box;
border:1em solid red;
z-index:-1;
}
</style>
<table>
<tr>
<th class="title" colspan="2"><div class="bg"></div>(Subtitle)</th>
</tr>
</table>
2018/04/30