I know the question is a little old, but I’ll give you a solution and anyway stay there as a record.
By default the printers do not print anything in CSS as background, either image or color
To print the styles of background
the user needs to choose on their own "Background graphics" in the printer settings as in the image below
As already discussed in these two questions the printer by Default I didn’t print anything background
in CSS, neither images, colors, nor anything.
Print page with Background
Apply watermark without affecting text
But there are techniques that can solve this problem. As I will show below.
The first step is to create your unique CSS that will only use the @print
See the example below working, the color will turn red in the print. The technique is to apply a box-shadow
into the cell, so you can put the color you want and it will appear in the printing smoothly.
You can test right here by giving the Ctrl+P that will work!
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table thead tr th {
background: greenyellow; /* cor antes da impressão */
}
@media print{
table thead tr th{
box-shadow: 0 0 0 1000px red inset; /* cor para impressão */
}
}
<div class="container">
<table border="1">
<thead>
<tr>
<th>Item 1</th>
<th>Item 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto 1</td>
<td>Texto2</td>
</tr>
</tbody>
</table>
</div>
Print result with the above code, note the red box!
If you want to simulate how your print will go straight on the page without having to press Ctrl+P all the time just enable the "Print Preview" direct by Chrome Dev Tools so press F12:
Hi I put nothing changed, our so much work just to print a color shit, enough to be ridiculous.
– Junior
in your bootstrap.min.css on the @media part, add tb -Webkit-print-color-Adjust: Exact;
– Vitor Hallais
td{background-color: #000 ! Important;-Webkit-print-color-Adjust: Exact;}. It’s like this in my code
– Junior
it still wasn’t
– Junior