使用 Bootstrap 打印 HTML 表格背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29563548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print HTML table background color with Bootstrap
提问by JTE
If I use Bootstrap tableclass on a table, print preview doesn't show background color for tr.
如果我table在表格上使用 Bootstrap类，打印预览不会显示tr.
My code
我的代码
<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>
On screen, all is red but on print preview only the divelement is red.
在屏幕上，一切都是红色的，但在打印预览中，只有div元素是红色的。
If I remove the tableclass, everything works (except I need table style).
如果我删除table类，一切正常（除了我需要表格样式）。
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 otherelements.
注意：指示的重复项（CSS @media 打印问题与 background-color;）不是这里的问题，我的设置被检查以打印背景颜色。此外，我可以为其他几个元素打印颜色。
Answer :
回答 ：
Thanks to @Ted comments, I overrided tdstyle for tableclass :
感谢@Ted 的评论，我覆盖td了tableclass 的样式：
<style type="text/css">
@media print {
.bg-danger {
background-color: #f2dede !important;
}
.table td {
background-color: transparent !important;
}
}
</style>
回答by Ted
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.
像他们一样写你的覆盖，你应该很高兴。
回答by Joe Swindell
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，其他浏览器不支持。
回答by The Aelfinn
Adding onto @Ted's answer, the following will override the default bootstrap background-color !importantrule:
添加到@Ted 的答案中，以下内容将覆盖默认引导程序background-color !important规则：
@media print {
table tr.highlighted > td {
background-color: yellow !important;
}
}
回答by Zanyar J.Ahmed
Replace tableclass 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;
}
回答by tfa
I used a table th header row and styled it like this
我使用了一个表格标题行并像这样设置了它的样式
.table th {
background-color: #2D3347 !important;
color: #fff !important
}
回答by pszafer
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>
