Bootstrap how to print table background colors?

Question

Good Afternoon

I would like to print with bootstrap the colors I put in my table example:

<td bgcolor="#000"> 

But when I print it changes to white background and black letters.

I’ve been reading that to print the colored table is related to the file bootstrap.min.css, i found the line where are all the information related to @print media

I’ve already added

td{background-color: #0000 !important;}

Didn’t work either.

Answer 1

I know the question is a little old, but I’ll give you a solution and anyway stay there as a record.

By default the printers do not print anything in CSS as background, either image or color

To print the styles of background the user needs to choose on their own "Background graphics" in the printer settings as in the image below

As already discussed in these two questions the printer by Default I didn’t print anything background in CSS, neither images, colors, nor anything.

Print page with Background

Apply watermark without affecting text

But there are techniques that can solve this problem. As I will show below.

The first step is to create your unique CSS that will only use the @print

See the example below working, the color will turn red in the print. The technique is to apply a box-shadow into the cell, so you can put the color you want and it will appear in the printing smoothly.

You can test right here by giving the Ctrl+P that will work!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

table thead tr th {
    background: greenyellow; /* cor antes da impressão */
}

@media print{
  table thead tr th{
    box-shadow: 0 0 0 1000px red inset;  /* cor para impressão */
  }
}

<div class="container">
    <table border="1">
        <thead>
            <tr>
                <th>Item 1</th>
                <th>Item 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Texto 1</td>
                <td>Texto2</td>
            </tr>
        </tbody>
    </table>
</div>

Print result with the above code, note the red box!

If you want to simulate how your print will go straight on the page without having to press Ctrl+P all the time just enable the "Print Preview" direct by Chrome Dev Tools so press F12:

Answer 2

In the call of your css, see if you declared the "media"

Example:

<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all'>

Answer 3

Bootstrap really has a problem with printing, it doesn’t give you so much freedom. First of all because it already uses the !important on their properties. So if you add: td{background-color: #000 !important;} it won’t help, but this is due to a CSS rule.
tags/chained classes have priority and there is one in the boostrap file for the td:

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

And that doesn’t allow you to switch using just the td, but you can replace her:

.table td,
.table th {
  background-color: #000 !important; /* Só mudar a cor */
}

In the version non-minified you find this rule on line 256;

Or rather, I do not recommend replacing it directly in the bootstrap, but in a file below it, which contains exactly: .table td;

Answer 4

if you want to add in the line of code you must do:

<table class="table">
  <tr>
    <td style="background-color: red;">Link</td>
  </tr>
</table>

If you want the bootstrap have standardized options that already brings you a background that you may want to use:

<table class="table">
  <tr>
    <td class="active">CORES</td>
    <td class="success">CORES</td>
    <td class="warning">CORES</td>
    <td class="danger">CORES</td>
    <td class="info">CORES</td>
  </tr>
</table>

Or you can add a class and call the color you want to it in a separate css file which is the most correct.

.minha-cor {
 background-color: blue;
 color: white;
}

<table class="table">
  <tr>
    <td class="minha-cor">AZUL</td>
  </tr>
</table>