How do I stop bootstraps table background color setting for print media over riding my class setting

I am using twitter-bootstrap as the main styling for my HTML.

I have a table which is generated (from an ember app) and each cell of the table has a background color set to indicate a certain state. The color is set with a class selector.

This work perfect for the screen, but when printing I just get white background color, because bootstrap defines the following:

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

My html looks something like this:

<table class-"table table-condensed>
   <tr>
     <td class="bg-color1>Content</td>
     <td class="bg-color2>Content</td>
   </tr>
</table>

My css looks like this:

.bg-color1 {
  background-color: #ababab;
}
.bg-color2 {
  background-color: #bababa;
}
@media print {
 .bg-color1 {
   background-color: #ababab;
 }
 .bg-color2 {
   background-color: #bababa;
 }
}

It still doesn't work if I use !important in the print media class descriptions. Also if I add the following to 'undo' the td th setting from bootstrap it doesn't work as this takes precedence over my class settings so I still don't get the color when printed

@media print {
 .table td, .table th {
   background-color: initial !important;
  }
}

There seems no way to get colored backgrounds with class selector using bootstrap. Does anyone have a solution for this.