使用 Bootstrap 打印 HTML 表格背景颜色
[英]Print HTML table background color with Bootstrap
问题描述
If I use Bootstrap table class on a table, print preview doesn't show background color for tr .
如果我在表格上使用 Bootstrap table class，打印预览不会显示tr的背景颜色。
My code我的代码
@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>
On screen, all is red but on print preview only the div element is red.在屏幕上，一切都是红色的，但在打印预览中只有div元素是红色的。
If I remove the table class, everything works (except I need table style).如果我删除table class，一切正常（除了我需要表格样式）。
My configuration: IE11 and Windows 7.我的配置：IE11 和 Windows 7.
Is there a trick to print the background color?有打印背景颜色的技巧吗？
Note: The indicated duplicate ( CSS @media print issues with background-color; ) is not the issue here, my settings are checked to print background colors. Also, I can print color for several other elements.注意：指示的副本（ CSS @media print issues with background-color; ）不是这里的问题，我的设置被检查为打印背景 colors。此外，我可以为其他几个元素打印颜色。
Answer:回答：
Thanks to @Ted comments, I overrided td style for table class:感谢@Ted 的评论，我覆盖了table class 的td样式：
<style type="text/css">
@media print {
.bg-danger {
background-color: #f2dede !important;
}
.table td {
background-color: transparent !important;
}
}
</style>
7 个解决方案
解决方案1
35 已采纳 2015-04-10 15:31:10
Bootstrap explicitly sets the background to white for printing--this is in their CSS: Bootstrap 显式地将背景设置为白色以进行打印——这在他们的 CSS 中：
@media print {
.table td, .table th {
background-color: #fff !important;
}
}
Write your override like theirs and you should be good to go.像他们一样写你的覆盖，你应该很高兴。
解决方案2
2 2018-04-28 16:14:11
Adding onto @Ted's answer, the following will override the default bootstrap background-color !important rule:添加到@Ted 的答案中，以下内容将覆盖默认的引导程序background-color !important规则：
@media print {
table tr.highlighted > td {
background-color: yellow !important;
}
}
解决方案3
1 2015-04-10 14:09:47
There is not.那没有。 By default they don't print.默认情况下，它们不打印。 It's a browser option that can't be overcome by CSS/JS etc.这是 CSS/JS 等无法克服的浏览器选项。
There IS this, which force colors...allegedly in Chrome有这个，它强制颜色......据称在 Chrome 中
-webkit-print-color-adjust
Which is listed as BUGGY support ONLY for chrome, and not supported in other browsers.哪个被列为 BUGGY 支持，仅适用于 chrome，其他浏览器不支持。
解决方案4
1 2020-05-14 13:37:24
Replace table class to table-print将table类替换为table-print
By using this CSS code通过使用此 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
0 2017-10-16 16:28:55
I used a table th header row and styled it like this我使用了一个表格标题行并像这样设置了它的样式
.table th {
background-color: #2D3347 !important;
color: #fff !important
}
解决方案6
0 2018-02-01 09:37:38
I think better way is to use more specific css selector我认为更好的方法是使用更具体的 css 选择器
<style>
@media print {
.table td.cell {
background-color: blue !important;
}
}
</style>
<table class="table">
<tr>
<td class="cell">TR 1</td>
</tr>
</table>
解决方案7
0 2023-01-17 04:29:53
I tried all suggested solutions here (and in many other questions), such as applied background-color: #000;important;我在这里（以及许多其他问题）尝试了所有建议的解决方案，例如 applied background-color: #000;important; both in stylesheet and inline, or set在样式表和内联中，或设置
@media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
, even combined them together, but nothing worked. ，甚至将它们组合在一起，但没有任何效果。
As you said above, everything works except <table> , so the easiest trick is to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).正如您在上面所说的，除了<table>之外，一切正常，所以最简单的技巧是用<div>包裹<th>或<td>内的任何内容（您可以调整填充以使其显示与之前相同）。
eg例如
...
<th><div>Col title here...</div></th>
...
<td><div>Content here...</div></td>
...
For me, problem was solved by doing this " hack ".对我来说，这个“ hack ”解决了问题。
Hope this help!希望这有帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.