Print HTML table background color with Bootstrap

Print HTML table background color with Bootstrap

If I use Bootstrap table class on a table, print preview doesn’t show background color for tr.
My code


DIV

TR 1
TR 2
TR 3

On screen, all is red but on print preview only the div element is red.
If I remove the table class, everything works (except I need table style).
My configuration : IE11 and Windows 7.
Is there a trick to print the background color ?
Note: The indicated duplicate (CSS @media print issues with background-color;) is not the issue here, my settings are checked to print background colors. Also, I can print color for several other elements.
Answer :
Thanks to @Ted comments, I overrided td style for table class :

Solutions/Answers:

Solution 1:

Bootstrap explicitly sets the background to white for printing–this is in their CSS:

@media print { 
    .table td, .table th { 
        background-color: #fff !important; 
    } 
}

Write your override like theirs and you should be good to go.

Solution 2:

There is not. By default they don’t print. It’s a browser option that can’t be overcome by CSS/JS etc.

There IS this, which force colors…allegedly in Chrome

-webkit-print-color-adjust

Which is listed as BUGGY support ONLY for chrome, and not supported in other browsers.

Solution 3:

Adding onto @Ted’s answer, the following will override the default bootstrap background-color !important rule:

@media print {
    table tr.highlighted > td {
        background-color: yellow !important;
    }
}

Solution 4:

I used a table th header row and styled it like this

.table th {
        background-color: #2D3347 !important;
        color: #fff !important
    }

Solution 5:

I think better way is to use more specific css selector

<style>
@media print {
   .table td.cell {
     background-color: blue !important;
   }
}
</style>

<table class="table">
  <tr>
    <td class="cell">TR 1</td>
  </tr>
</table>

References

Related:  Rails 4 form builder with comprehensive support for Twitter Bootstrap 3 [closed]