How to print background colors in HTML with CSS

2
<body>
<div id="div0">
    I love ...
</div>
<div id="div1">
Teste
</div>

<table id="table" border="1" align="center">
    <tr>
        <td>
            Coluna 1
        </td>
        <td>
            Coluna 2
        </td>
        <td>
            Coluna 3
        </td>
        <td>
            Coluna 4
        </td>
        <td>
            Coluna 5
        </td>

    </tr>
            <td>
            Coluna 1
        </td>
        <td>
            Coluna 2
        </td>
        <td>
            Coluna 3
        </td>
        <td>
            Coluna 4
        </td>
        <td>
            Coluna 5
        </td>

    </tr>

 #div0 {
    background-color:#FF0000; 
}
#div1{
    background-color: #FFD6D6;
}
#table:
{
    background-color: #170E0E;
}

I want the div to be exactly the same.

When you print, only the text exits, and the table without the colors

    
asked by anonymous 11.05.2015 / 03:24

1 answer

2

In Chrome and Safari (and possibly other Webkit-based browsers), there is the non-default property -webkit-print-color-adjust , which can be set to exact to force the printing of background colors:

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

This forces impression for all descendants of the body (but the body itself is an exception, and its background color is not printed).

In other browsers you can force the backgrounds to print by changing a setting, usually available in the print dialog itself.

    
11.05.2015 / 03:42