Customizing window.print()

Question

I have used window.print() function to print a web page with a table. The table header has a font color. The problem is, on printing the headers are just black. Below is the code:

<thead>
<tr style="color:red">
<th>Property name</th>
<th>Room number</th>
<th>Month</th>
<th>Tenant name</th>
<th>Rent Required</th>
<th>Rent Paid</th>
<th>Balance</th>

</tr>
</thead>

//button

<input type="button" class="btn btn-block 
btn-primary  btn-xs" value="PRINT" 
onclick="window.print() ;" />

Is there a way to make it print the table row in red?

surround the code with `` tag, and you will get it in red color, Here I am getting in the same color in print mode. http://jsfiddle.net/5xpbetu1/ — chintuyadavsara, Nov 02 '18 at 10:08
Possible duplicate of [Background color not showing in print preview](https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview) — Nikhilesh K V, Nov 02 '18 at 10:14

score 0 · Accepted Answer · edited Nov 02 '18 at 10:23

For Chrome/Safari (unsure of Firefox) you can use the follow CSS to keep colours the same between displaying and printing:

-webkit-print-color-adjust: exact;

Full working example below.

<head>
  <style>
    .font-red {
      -webkit-print-color-adjust: exact;
      color: red;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr class="font-red">
        <th>Property name</th>
        <th>Room number</th>
        <th>Month</th>
        <th>Tenant name</th>
        <th>Rent Required</th>
        <th>Rent Paid</th>
        <th>Balance</th>
      </tr>
    </thead>
  </table>

  <input type="button" class="btn btn-block btn-primary  btn-xs" value="PRINT" onclick="window.print() ;" />
</body>

Thanks for the responses, my code didnt work but I managed to narrow down the problem to a css file I liked to...a bootstrap component. Commenting its link on the page makes the code work fine...Am now trying to get the exact line — Syl Junior Vutoh, Nov 02 '18 at 15:10

Customizing window.print()

1 Answers1