Blog

We received a support request from a developer who was using Bootstrap’s CSS and his HTML table was set to “striped” via:

<table class=”table table-striped”> …</table>

Now the HTML was correct, and when loading it up in a browser, the striped rows, which alternate a background color to make it easier for reading was appearing just fine. However, when printing to PDF using Headless Chrome, the background color on those striped rows were not appearing at all.

As it turns out, there is a discussion about this on Github here: https://github.com/twbs/bootstrap/issues/25453 and the issue is that Bootstrap’s CSS forces a white background when in Print mode (as what happens when using Headless Chrome).

The trick is to override Bootstrap’s CSS. A user on StackOverflow figured this out: https://stackoverflow.com/questions/34052332/print-bootstrap-striped-table

@media print {
tr:nth-child(even) td {
background-color: red !important;
-webkit-print-color-adjust: exact;
}
}

See the full jsfiddle here: http://jsfiddle.net/pfdiass/1kvmjwxa/5/