I have created a table using HTML and PHP that reads the data from the database. Each cell of the table displays different values like 1,2,3 and based on the value the colors of the cells are changed. I have managed to do it so far, and used the following JavaScript for the conditional formatting of the cells:
Script:
<script type="text/javascript">
$(function() {
$('#table1 td').each(function() {
if ($(this).text() == '1') {
$(this).css('background-color', 'red');
}
if ($(this).text() == '2') {
$(this).css('background-color', 'yellow');
}
if ($(this).text() == '3') {
$(this).css('background-color', 'green');
}
});
});
</script>
Now I want to print the table with print Div. print option is working fine as well, however there is no color associated with the cells, its all black and white. I searched a lot but could not find any solution so far. I really need your help, and any suggestions or codes will be highly appreciated.
Try to set color-adjust: exact;
(+with prefix for chrome) - Browser support for color-adjust
By default the brosers dont print Background colors try to add <style type="text/css"> @media print { body { color-adjust: exact; } } </style>
Additionally, In the print dialog window in Chrome there is a checkbox under "more settings" to also print BG Colors See image:
@media print{
background-color: green;
//do the same for each other styles you need to print
}
</div>