Print HTML table background color with Bootstrap

Question

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

My code

@media print {
  .bg-danger {
    background-color: #f2dede !important;
  }
}

<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. — Ted, Apr 10 '15 at 14:17
Ok I can't answer my question now...But @Ted your solution works !! I overrided ``tr`` but I didn't think for ``td``. Thanks !!! I added ``.table td { background-color: transparent !important; }`` in the ``print`` section. — jootl, Apr 10 '15 at 14:34
@Ted want to convert your comment to an answer? Reopened the question :) — Chris Baker, Apr 10 '15 at 15:19

score 37 · Accepted Answer · answered Apr 10 '15 at 15:31

37

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.

answered Apr 10 '15 at 15:31

Ted

14,757
2
41
58

1

So the best answer is to edit the bootstrap file and remove the !important (everwhere! - it should only ever be used if required - not to 'gee if you follow my style then changing it for any reason is bad, so I'm going to force you to use !important everywhere!) - Or option 2, use !important all over your code to override their over use of !Important? Is there a simple file I can just not include to get this or do I really have to hack it? – Traderhut Games Aug 25 '15 at 16:38
I am trying to get a page to print like a form that I'm duplicating - so I'd like to simply be able to view on the screen what is going to print. Div's not white, tables not white, images show with the background I set in the Div. And not have to edit everything and put in 500 !Importants and override everything for printing! – Traderhut Games Aug 25 '15 at 16:40

score 2 · Answer 2 · answered Apr 10 '15 at 14:09

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.

answered Apr 10 '15 at 14:09

Joe Swindell

684
1
7
18

1

But the ``div`` element is printing well. And if I remove ``class="table"``, my table is printing well. There is an issue only if I use ``class="table"``. – jootl Apr 10 '15 at 14:14
I can't use Chrome, my page is displayed in the WPF WebBrowser component which use IE – jootl Apr 10 '15 at 14:16

score 2 · Answer 3 · answered Apr 28 '18 at 16:14

2

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

answered Apr 28 '18 at 16:14

The Aelfinn

13,649
2
54
45

Zanyar Jalal · Answer 4 · 2020-08-17T08:08:12.523

Replace table class to table-print

By using this CSS code

.table-print {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .table-print thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table-print th, .table-print td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
 .table-print .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}

score 0 · Answer 5 · answered Oct 16 '17 at 16:28

0

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

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

answered Oct 16 '17 at 16:28

tfa

1,643
16
18

score 0 · Answer 6 · answered Feb 01 '18 at 09:37

0

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>

answered Feb 01 '18 at 09:37

pszafer

370
2
15

score 0 · Answer 7 · edited Jan 17 '23 at 08:21

I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

, even combined them together, but nothing worked.

As you said above, everything works except <table>, so the easiest trick is to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).

e.g.

...
<th><div>Col title here...</div></th>
...
<td><div>Content here...</div></td>
...

For me, problem was solved by doing this "hack".

Hope this help!

Print HTML table background color with Bootstrap

7 Answers7