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 when printing with class selector using bootstrap. Does anyone have a solution for this.
2
Answers
May Help:
Oh yeah, just noticed something…
CSS has this pain-in-the-butt preference thing where the larger your selection tree, the more priority it has.
For example,
table > td
takes priority over justtd
In Bootstrap’s CSS, the
td
is selected as.table td
, but your selector is just.bg-color1
or.bg-color2
There are two ways to fix this.
!important
from Bootstrap’s CSS and keep the!important
in your CSS.table .bg-color1
I have no evidence to prove this, but this is what I’ve noticed.