CODEWITHSUNDEEP
javascripthtmlcssprinting
ceid-vg
ceid-vg

Reputation: 333

HTML - Print Page does not retrieve CSS

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

Upvotes: 0

Views: 60

Answers (2)

Johannes
Johannes

Reputation: 67798

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.

Upvotes: 1

Subham
Subham

Reputation: 11

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; }
}

Upvotes: 1

Related Questions