0

I have a table in which I make some calculations and eventueel use the jquery function .css() to add new css rules(coloring table background) to the table.

Now when I want to print the page, I get a black and white page without any effect.

How can I print my table while maintaining the table?

I know you can make special stylesheets for printing, but I have currently no clue on how to do this. Any help is welcome.

HTML:

<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>

Code example

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:

https://jsfiddle.net/toofle/jng2h9rp/

Thanks in advance!

Toofle
  • 214
  • 1
  • 2
  • 11

1 Answers1

0

Write your css adding media="print" in style tag, that will be applicable to only print section 

<style media="print">
   // your code
</style>
Rahul
  • 2,374
  • 2
  • 9
  • 17