使用 Bootstrap 打印 HTML 表格背景颜色
Posted
技术标签:
【中文标题】使用 Bootstrap 打印 HTML 表格背景颜色【英文标题】：Print HTML table background color with Bootstrap 【发布时间】：2015-06-16 07:08:23 【问题描述】：如果我在表格上使用 Bootstrap table 类，打印预览不会显示 tr 的背景颜色。
我的代码
<head>
<!-- All Bootstrap's stuff ... -->
<!-- My custom style -->
<style type="text/css">
@media print
.bg-danger
background-color: #f2dede !important;
</style>
</head>
<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;) 不是这里的问题，我的设置已检查以打印背景颜色。另外，我可以为几个 other 元素打印颜色。
答案：
感谢@Ted cmets，我为table 类覆盖了td 样式：
<style type="text/css">
@media print
.bg-danger
background-color: #f2dede !important;
.table td
background-color: transparent !important;
</style>
【问题讨论】：
我的 IE 打印背景设置已经检查完毕。 Bootstrap 明确将背景设置为白色以进行打印——这在他们的 CSS 中：@media print .table td, .table th background-color: #fff !important; 。像他们一样写下你的覆盖。
好的，我现在无法回答我的问题......但是@Ted 你的解决方案有效！我覆盖了tr，但我没想到td。谢谢 ！！！我在print 部分添加了.table td background-color: transparent !important; 。
别担心，很高兴我能帮上忙 :)
@Ted 想要将您的评论转换为答案？重新打开问题:)
【参考方案1】：
Bootstrap 明确地将背景设置为白色以进行打印——这是在他们的 CSS 中：
@media print
.table td, .table th
background-color: #fff !important;
像他们一样写你的覆盖，你应该很高兴。
【讨论】：
所以最好的答案是编辑引导文件并删除 !important （无论何时何地！ - 它应该只在需要时使用 - 如果你遵循我的风格然后改变它为任何原因很糟糕，所以我要强迫你在任何地方都使用 !important！） - 或者选项 2，在你的代码中使用 !important 来覆盖他们对 !Important 的过度使用？是否有一个我不能包含的简单文件来获取它，或者我真的必须破解它吗？ 我试图让一个页面像我正在复制的表单一样打印 - 所以我希望能够在屏幕上简单地查看要打印的内容。 Div 不是白色的，表格不是白色的，图像以我在 Div 中设置的背景显示。并且不必编辑所有内容并放入 500 ！重要并覆盖所有内容以进行打印！【参考方案2】：添加到@Ted 的答案，以下将覆盖默认引导background-color !important 规则：
@media print
table tr.highlighted > td
background-color: yellow !important;
【讨论】：
【参考方案3】：没有。默认情况下，它们不打印。这是 CSS/JS 等无法克服的浏览器选项。
有这个，它强制颜色......据称在 Chrome 中
-webkit-print-color-adjust
这被列为 BUGGY 仅支持 chrome，其他浏览器不支持。
【讨论】：
但是div 元素的打印效果很好。如果我删除class="table"，我的表格打印得很好。仅当我使用 class="table" 时才会出现问题。
我无法使用 Chrome，我的页面显示在使用 IE 的 WPF WebBrowser 组件中【参考方案4】：
将 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;
【讨论】：
【参考方案5】：我使用了第一个表格标题行并将其设置为这样
.table th
background-color: #2D3347 !important;
color: #fff !important
【讨论】：
【参考方案6】：我认为更好的方法是使用更具体的 css 选择器
<style>
@media print
.table td.cell
background-color: blue !important;
</style>
<table class="table">
<tr>
<td class="cell">TR 1</td>
</tr>
</table>
【讨论】：
以上是关于使用 Bootstrap 打印 HTML 表格背景颜色的主要内容，如果未能解决你的问题，请参考以下文章
CSS/SCSS/bootstrap :: 覆盖 bootstrap 中的打印设置 :: 更改背景：透明！对颜色很重要