HTML - Print Page does not retrieve CSS

Question

I am trying to print a page upon loading it and I have been trying to print the page with @media print inside CSS but I cant get it to work, no matter what I do.

Only thing I need to do is to apply colors in the <th> tags.

HTML Code:

<body onload="window.print();">

<div>
  <h2 class="text-center"><span class="label label-default">Order Form Details</span></h2><br>
  <table class="table table-hover table-responsive">
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Telephone</th>
        <th>Postal Code</th>
        <th>Priority</th>
      </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</div>

</body>

CSS Code:

th {
   background-color: #C8C8C8;
}

JSFiddle here

Subham · Answer 1 · 2017-09-23T15:44:01.690

1

you can use the @media print in css

.table th {
   background-color: #C8C8C8;
   -webkit-print-color-adjust: exact; 
}

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

edited Sep 23 '17 at 15:44

answered Sep 23 '17 at 15:36

Subham

11
3

yeah, had already tried this and adding `!important` in `@media print`, but no, did not solve it – ceid-vg Sep 23 '17 at 15:39
plus, its `@media print`, not `@media print()` I think – ceid-vg Sep 23 '17 at 15:40
Printing background colors can be impacted by browser settings. Please view [https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color](https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color) – Julio Feferman Sep 23 '17 at 15:43

score 1 · Accepted Answer · answered Sep 23 '17 at 16:23

This depends on the browser settings, but most browsers won't print background colors by default (you can set it to do, but only in the browser itself, i.e. the user who opens the page), and you can't force them to do that by default, since it's a browser setting which the website code has no influence on.

If you absolutely need it, you would have to code that as an img tag which you put behind your DIV.

HTML - Print Page does not retrieve CSS

2 Answers2