styling background color in print

spiderkzn

I am able to display several background color on cell. But it don't display background in print option.

How do I make background color on cell that column called "ClassCode"?

colin

This example here shows how to change the colour for all cells. You could change the selector to colour specific rows/columns,

Colin

spiderkzn

Hi Colin, that link you sent it working when test.

When I've tried develop on my side. The print screen does display color background. BUT on Print option the review page does not display color. Even I check Background graphics and still not display. How do I resolve this?

The code I'm using

var test = $("#example").DataTable();

var v = test.column(4).data().toArray();

for (var i = 0; i < v.length; i++) {

$(doc.document.body).find("table tbody tr:nth-child(" + (i + 1) + ") td:nth-child(5)").css("background-color", ClassCodeColorBG(test.cell(i, 4).data()));
}

The ClassCodeColorBG is the function which it use the color

spiderkzn

I found out. It require bootstrap 5 to make it work. (I'm using bootstrap 4).

is there is way to display on print review on bootstrap 4 without require upgrade to 5?

colin

That's odd. The styling framework shouldn't make a difference, the example I posted was using the DataTables styling. Can you update my example to use BS4 and to demonstrate the problem, and we can take a look,

Colin

spiderkzn

Hi, Sure.

I've tried use BS4 as link below as it return color background print review.

I'm using https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css which I prefer stay this way without upgrade to 5.

When I try use this https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css that work but it cause mess up the style.

I think it wise to use <style> tab which I need the code that I can able to print color background.

allan

Colin's example doesn't actually use either Bootstrap 4 or 5. I'd also be surprised if the styling framework made a difference for this.

Can you show us a running example of the issue with BS4 please so I can see if I can debug it?

Allan

spiderkzn

Hi allan,

It look like i am unable to show example because the BS4 stored in my development.

However I found someone have the issue

https://jsfiddle.net/dancosio/wc30Lx4k/2/

When you click print, the Score with 1 supposed to display red background in print review.

allan

1 - I've added the autoPrint: false option to the button so we can take our time and inspect the document. I can see that it does have a background colour for the cell, but it doesn't show in the print preview.

2 - So I added background colour to the span and that does show in the print preview.

3 - Even doing it with a class name makes no difference.

So this isn't a DataTables error, but rather an issue in the browsers. There is the "print backgrounds" option in the print preview, but it makes no difference for me.

There are some hacks in this SO thread which might work? I've tried the -webkit-print-color-adjust:exact; one and it makes no difference for me. I haven't tried the ::before hack.

I've tried looking through the Chrome and Firefox bug databases, but don't immediately see anything. It seems to me like a conscious choice of the browser makers not to print background colours from table cells.

Allan

spiderkzn

Hi allan,

I found out it because of bootstrap 4 so I've use Bootstrap community to assist and I have found a way. Please visit

https://github.com/orgs/twbs/discussions/40811

allan

Very good! Thanks for posting back. I missed what Bootstrap 4 was doing there.

Allan