logo标签列表

使用Bootstrap打印HTML表格背景颜色

htmlcsstwitter-bootstrap
26
如果我在表格上使用Bootstrap的 table 类，打印预览会不显示tr 的背景颜色。
我的代码： 

@media print {
  .bg-danger {
    background-color: #f2dede !important;
  }
}
<body>
  <div class="bg-danger">
    <td>DIV</td>
  </div>

  <table class="table">
    <tr class="bg-danger">
      <td>TR 1</td>
    </tr>
    <tr class="danger">
      <td>TR 2</td>
    </tr>
    <tr style="background-color: #f2dede !important;">
      <td>TR 3</td>
    </tr>
  </table>
</body>

屏幕上显示的整个内容都是红色的，但在打印预览中只有 div 元素是红色的。

如果我去掉 table 类，一切都正常工作（但我需要表格样式）。

我的配置: IE11 和 Windows 7。

有什么技巧可以打印出背景颜色吗？

注意: 所指出的重复问题 (CSS @media print issues with background-color;) 不是这里的问题，我的设置已检查以打印背景颜色。此外，我可以打印多个其他元素的颜色。

答案 :

感谢 @Ted 的评论，我覆盖了 table 类的 td 样式：

<style type="text/css">
  @media print {
    .bg-danger {
      background-color: #f2dede !important;
    }
    
    .table td {
      background-color: transparent !important;
    }
  }
</style>
我的IE设置中已经勾选了打印背景的选项。 - jootl
Bootstrap在打印时明确将背景设置为白色 - 这是在他们的CSS中：@media print { .table td, .table th { background-color: #fff !important; } }。请像他们一样编写您的覆盖。 - Ted
1
好的，我现在无法回答我的问题...但是@Ted你的解决方案有效！！我重写了“tr”，但没有考虑“td”。谢谢！！我在“print”部分添加了“.table td { background-color: transparent !important; }”。 - jootl
没关系，很高兴能帮忙 :) - Ted
@Ted想将你的评论转换成答案吗？问题已重新开放 :) - Chris Baker
在Chrome上对我非常有效，帮助很大，非常感谢。 - Hoser
7个回答
37

Bootstrap专门为打印将背景设置为白色--这在他们的CSS中：

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

按照他们的方式编写覆盖代码，你就可以顺利进行。

1
所以最好的答案是编辑引导文件并删除!important（到处都是！ - 只有在必要时才应使用它 - 而不是“嘿，如果你遵循我的风格，那么出于任何原因更改它是不好的，所以我将强制您到处使用!important！”）-或者选项2，全面使用!important来覆盖他们对!important的过度使用？是否有一个简单的文件我可以不包括以获得这个或者我真的必须黑客攻击它？ - Traderhut Games
我正在尝试让一个页面像我正在复制的表格一样打印 - 所以我希望能够简单地在屏幕上查看即将打印的内容。Div不是白色，表格不是白色，图像显示为我在Div中设置的背景。而且不必编辑所有内容并放入500个!Important来覆盖打印时的所有内容！ - Traderhut Games
2

在@Ted的回答基础上，以下内容将覆盖默认的Bootstrap background-color !important规则：

@media print {
    table tr.highlighted > td {
        background-color: yellow !important;
    }
}
2

没有这个选项。默认情况下，它们不会打印。这是一个浏览器选项，不能通过CSS/JS等方式克服。

但是，有这个选项，可以强制使用颜色...据说在Chrome中可行。

-webkit-print-color-adjust

该功能仅在Chrome中被列为BUGGY支持，而在其他浏览器中不受支持。

1
但是“div”元素打印得很好。如果我删除“class =” table“”，我的表格也可以正常打印。只有在使用“class =” table“”时才会出现问题。 - jootl
我无法使用Chrome，因为我的页面显示在使用IE的WPF WebBrowser组件中。 - jootl
1

将 table 类替换为 table-print

使用以下 CSS 代码实现

.table-print {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .table-print thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table-print th, .table-print td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
 .table-print .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}
0

我认为更好的方法是使用更具体的CSS选择器

<style>
@media print {
   .table td.cell {
     background-color: blue !important;
   }
}
</style>

<table class="table">
  <tr>
    <td class="cell">TR 1</td>
  </tr>
</table>
0

我在这里尝试了所有建议的解决方案（以及许多其他问题），例如在样式表中和内联中应用background-color: #000 !important;，或设置

@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

即使将它们组合在一起，也没有任何作用。

正如您上面所说，除了 <table> 之外，一切都正常，因此最简单的方法是使用 <div> 将 <th> 或 <td> 中的任何内容包装起来（您可以调整填充以使其显示与先前相同）。

例如：

...
<th><div>Col title here...</div></th>
...
<td><div>Content here...</div></td>
...

对我来说，问题通过这个"hack"得到了解决。

希望这能帮到你！

0
我使用了一个表格的表头行，并将其样式设置为这样。
.table th {
        background-color: #2D3347 !important;
        color: #fff !important
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接