打印时不显示表格行背景颜色

Posted 2023-03-06

【中文标题】打印时不显示表格行背景颜色

【英文标题】：Table row Background Color not showing when printing

【发布时间】：2016-03-03 18:12:03

【问题描述】：

我在一个表格行中遇到了背景颜色问题。

<tr style="background-color:#999999">
        <td > <strong>Opinion</strong></td>
        <td > <strong>Action</strong></td>
        <td colspan="4"><strong>Ratings</strong></td>
        <td ><strong>Outlook</strong></td>
        <td ><strong>Rating Type</strong></td>
    </tr>

这段代码运行良好

这是输出

问题

当我想打印此页时。未显示该行的background-color。

谁能帮帮我？

【问题讨论】：

先尝试另存为pdf

打印或另存为pdf时出现同样的问题

可能重复：***.com/questions/14987496/…

【参考方案1】：

您还可以在打印对话框中推送更多设置并检查“背景图形”

【参考方案2】：

将此添加到 tr 样式

 <style>
  .row
   background-color:#999999;
   -webkit-print-color-adjust: exact; 
   
 </style>

<tr class="row">
    <td > <strong>Opinion</strong></td>
    <td > <strong>Action</strong></td>
    <td colspan="4"><strong>Ratings</strong></td>
    <td ><strong>Outlook</strong></td>
    <td ><strong>Rating Type</strong></td>
</tr>

【讨论】：

是的。我编辑了我的答案。它很好。它工作。

不错的答案@SaranyaR，但使用内联 CSS 我不是一个好习惯。

我刚刚将其添加到他们现有的代码中。感谢您的信息。我会记住的..

【参考方案3】：

尝试使用

<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <table>

表结构...

并使用下面的类型 css..

@media print 
tr.vendorListHeading 
    background-color: #999999!important;
    -webkit-print-color-adjust: exact; 


@media print 
    .vendorListHeading th 
    color: white !important;

希望这会有所帮助...