Tables are not printing correctly

[ghost]

Hello,
today I've added feature to print tables from my website.
Then I have noticed that tables with classes below are not printing correctly, although they are displayed correctly on screen.

• <thead class="thead-dark"> - Header and font are both white so header is not readable

• <table class="table table-dark"> - Like header, whole table is white, including the font.

• <table class="table table-striped"> - There are no striped rows when printing. Class has no effect when printing. Print result is the same with and without it.

At first I suspected that something is wrong with my website (that my CSS is overriding Bootstrap CSS because it is linked after it), but then I tried to print tables from official Bootstrap website and got the same issue.

I'm using Bootstrap v4.0

Hope this will be resolved soon.
Thanks.

[mdo]

Background colors aren't always printed; there's usually a browser option for that. Unsure how much we should override that, which would screw things up for folks who want that background-color.

[scemby]

@ewaschen @duksi1993
Try to use -webkit-print-color-adjust: exact; like this:

.elementWhichShouldBeRedAndBlue {
    background-color: red;
    color: blue;
    -webkit-print-color-adjust: exact;
}

[onassar]

Did this ever get fixed? I'm using v4.1.3 and rendering PDFs with puppeteer, but the coloring is still off. I've tried setting -webkit-print-color-adjust: exact; on the appropriate elements as well.

[bidipeppercrap]

Did this ever get fixed? I'm using v4.1.3 and rendering PDFs with puppeteer, but the coloring is still off. I've tried setting -webkit-print-color-adjust: exact; on the appropriate elements as well.

Same, I still don't see any of my color printed.

[cireficc]

@mdo "Unsure how much we should override that, which would screw things up for folks who want that background-color"

Well, Bootstrap definitely overrides it and sets the background to white. Shouldn't it be inherit so that you don't override any colors that we've set in the table cell? Seems like Bootstrap is telling developers how things should print, instead of developers telling Bootstrap how it should print things.

[imclint21]

It's a real problem, need to be fixed!

[bound2]

Was this ever fixed? Seems to still be a problem. -webkit-print-color-adjust: exact; doesn't work for table elements. I can color any other div. Version 4.6.0.

[megasnort]

Concerning the striped tables: I was able to get this working by adding the print-color-adjust property to the td en th elements. If applied to the tr element it does not work.

Thus, this did not work:

@media print {
    .tallies-list-table.table-striped > tbody > tr:nth-of-type(2n+1){
        background-color: red !important;
        print-color-adjust: exact !important;
    }
}

This does work:

@media print {
    .tallies-list-table.table-striped > tbody > tr:nth-of-type(2n+1) > td,
    .tallies-list-table.table-striped > tbody > tr:nth-of-type(2n+1) > th{
        background-color: red !important;
        print-color-adjust: exact !important;
    }
}

Note that this is for Bootstrap 3 and .tallies-list-table is class solely for my project.