After performing some calculations and applying CSS rules using the .css() function in jQuery to color the background of a table, I am facing an issue when trying to print the page. The printed page appears in black and white without retaining any styling effects.
I need assistance on how to print the table while preserving its appearance. I am aware that special stylesheets can be created for printing purposes, but I currently lack the knowledge on how to do so. Any guidance on this matter would be greatly appreciated.
This is the HTML code for the table:
<table id='tbl1' style="width:100%">
<tr>
<th>Name</th>
<th>Location</th>
<th>Amount in kg</th>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 1</td>
<td>1237</td>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 2</td>
<td>1341</td>
</tr>
</table>
Below is a code example demonstrating how CSS rules are applied based on certain conditions:
table = $('#tbl1').find('td:nth-child(3)').each(function() {
val = parseInt($(this)[0].innerText, 10);
if (val > 1300) {
$(this).css({"background-color": "green"});
}
else {
$(this).css({"background-color": "red"});
}
});
Here is a fiddle example showcasing the scenario:
https://jsfiddle.net/toofle/jng2h9rp/
Your assistance is highly appreciated. Thank you!