2017-09-23 170 views
0

我想加載它時打印頁面,我一直在嘗試打印@media print頁面CSS,但我不能讓它工作,無論我做什麼。HTML - 打印頁面不檢索CSS

我唯一需要做的就是在<th>標籤中應用顏色。

HTML代碼:

<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代碼:

th { 
    background-color: #C8C8C8; 
} 

的jsfiddle here

回答

0

你可以使用@media打印在CSS

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

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

是啊,已經試過這個,在'@media print'中加入'!important',但沒有,沒有解決它 –

+0

加上它的'@media print',而不是'@media print()'我認爲 –

+0

打印背景顏色可能會受到瀏覽器設置的影響。請查看[https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color](https://stackoverflow.com/questions/3893986/css-media-print-issues- with-background-color) – jfeferman

0

這取決於瀏覽器的設置,但大多數瀏覽器默認不會打印背景顏色(你可以將它做的,但只有在瀏覽器本身,即誰打開頁面的用戶),和你不能強制他們默認這樣做,因爲它是網站代碼沒有影響的瀏​​覽器設置。

如果您絕對需要它,您必須將其編碼爲您放在DIV後面的img標籤。