Menu
If I use Bootstrap table class on a table, print preview doesn't show background color for tr.
My code
<head> <!-- All Bootstrap's stuff ... --> <!-- My custom style --> <style type="text/css"> @media print { .bg-danger { background-color: #f2dede !important; } } </style> </head> <body> <div class="bg-danger"> <td>DIV</td> </div> <table class="table"> <tr class="bg-danger"> <td>TR 1</td> </tr> <tr class="danger"> <td>TR 2</td> </tr> <tr style="background-color: #f2dede !important;"> <td>TR 3</td> </tr> </table> </body> 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 :
<style type="text/css"> @media print { .bg-danger { background-color: #f2dede !important; } .table td { background-color: transparent !important; } } </style> 
340
Using pre-defined classes, we can change the color of table cells and table rows. In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class.
The background color of the table is given by the bgcolor="color" attribute. When applied to the <table> tag, the color fills the background. Cell background colors are set by applying the bgcolor attribute to a <tr> tag (to color the row) or to a <td> tag (to color the cell).
Anchor components will darken on hover, just like the text classes. Some classes of background colors are listed below example. We can add background color to a div by simply adding class “bg-primary”, “bg-success”, “bg-danger”, “bg-info”, and many more as shown in the following examples.
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.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
