Print HTML table background color with Bootstrap

table background color not printing
css print font color
how to enable background graphics in print css
css print background color
bootstrap-print css
print html table with css
background color not showing in print preview html
background color not working in print preview

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>

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.

Bootstrap print CSS removes background color, Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css .table td, .table th { background-color: #fff  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE


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.

[Solved] Bootstrap striped table not printing to PDF, table>. Now the HTML was correct, and when loading it up in a browser, the striped rows, which alternate a background color to make it easier  Bootstrap Colors: Summary. Bootstrap contextual classes add color to an element depending on its context. Contextual clues in class names make it easier to read scripts. You can use these classes for Bootstrap text, background, and element color, as long as you use relevant prefixes.


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

web-design, Keep in mind that if the user has to enable "print background colors and images" enabled in <tr class="brd"> <td><div class="bgcol" align="center"><strong>NO. FYI am using Bootstrap CSS maybe this affect my css ? 0 0. I have a problem with the bootstrap CSS/print. In bootstrap CSS (reset.css) everything is cleared for printing. @media print { * { text-shadow: none !important; color: black !important; background: transparent !important; box-shadow: none !important; } } But I have to print several lines in color. My table looks like this:


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

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

Color print with Bootstrap styles, color printing with bootstrap" /> <meta name="author" content="Thara56" /> <! tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #f5f5f5; }  However, it is possible to fake the background color using an image, if you really need the background color to print by default. The trick is to create a single pixel image of the desired color and expand it to fill the element, then put the element's content inside a DIV, and put that DIV on top of the image using absolute positioning.


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>

HTML table bgcolor Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO The look of an HTML table can be greatly improved with CSS: selector and add a background-color to all


HTML/CSS Force Printing of Background Color, HTML/CSS Hack to get browsers to print background colors. <td style="​background-color: #53ff7b; width: 2em; height: 2em; text-align: center;"> a </td> Responsive Tables. The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:


Print HTML table background color with Bootstrap, 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  HTML HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference HTML Character Sets Google Maps Reference CSS CSS Reference CSS Browser Support CSS Selector Reference Bootstrap 3 Reference Bootstrap 4 Reference W3.CSS Reference Icon Reference Sass Reference


Colors · Bootstrap, Background color. Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on  Hello guys, I have a webpage to print that showing some data, I managed to hide all elements that's are not needed in printing, but background color for cells in table not display in printed version, although I've tried to put