Bootstrap how to print table background colors?

I know the question is half old, but I'll give you a solution and anyway it stays there as a record.

By default printers do not print anything that is in CSS as background , be it image or color

To print the styles of background , the user must choose background graphics in the printer settings as in the image below

AsalreadydiscussedinthesetwoquestionstheprinterbyDefaultdidnotprintanythingthatisbackgroundinCSS,neitherimages,norcolors,oranything.

Print page with Background

Apply watermark without affecting the text

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

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

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

You can test here by giving 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>

Result of printing with the above code, notice the red box!

IfyouwanttosimulatehowyourimpressionisgoingtogorightonthepagewithouthavingtopressCtrl+PallthetimejustenableChrome's"Print Preview" directly by typing < kbd> F12 :

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

Example:

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

The bootstrap really has a problem with printing, it does not give you so much freedom. First of all, it already uses !important in its properties. So if you add: td{background-color: #000 !important;} will not work, but this is because of a CSS rule. tags / chained classes has priority and there is one in the file in the boostrap for td :

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

And this does not allow you to switch using only td , but you can override it:

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

In the non-minified version 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, but containing exactly: .table td ;

If you want to add in the line of code you should do:

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

If you want the bootstrap has standard options that already gives 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 for it in a separate css file that is the most correct.

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

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