Question

我正在尝试在加载页面时打印页面，并且我一直在尝试使用@media print内的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

Answer 1

你可以在css中使用@media打印

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

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

Answer 2

这取决于浏览器设置，但大多数浏览器默认情况下不会打印背景颜色（您可以将其设置为，但仅限于浏览器本身，即打开页面的用户），您可以＆＃39;强制他们默认执行此操作，因为它是浏览器设置，网站代码对此没有影响。

如果您绝对需要它，则必须将其编码为您放在DIV后面的img标记。

HTML - 打印页面不检索CSS

2 个答案: