CSS 如何打印带有背景颜色的表格（不更改打印设置）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5110833/
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
CSS How to print a table with background color (without Print settings changes)
提问by maria
The aim is to print table with colored td-s. I need a way correct for all types of browsers.
目的是用彩色 td-s 打印表格。我需要一种适用于所有类型浏览器的方法。
Is there any way?
有什么办法吗？
回答by drolex
For webkit browsers (Chrome and Safari):
对于 webkit 浏览器（Chrome 和 Safari）：
body{
-webkit-print-color-adjust:exact;
}
回答by user194076
Quote from here: CSS @media print issues with background-color;
引自此处：CSS @media 打印背景色问题；
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
如果用户在他们的打印设置中关闭了“打印背景颜色和图像”，则没有 CSS 会覆盖它，因此请始终考虑到这一点。这是默认设置。
一旦设置好它就会打印背景颜色和图像，你有什么就可以了。
它出现在不同的地方。在 IE9beta 中，它位于纸张选项下的打印->页面选项中
在 FireFox 中，它位于页面设置 -> 选项下的 [格式和选项] 选项卡中。
回答by Adam Scarborough
a particularly ugly solution is to place position a .gif (or any form of vector graphic so the size can be changed) image in the table cell with height and width 100% then a negative z-index property.
一个特别难看的解决方案是在表格单元格中放置一个 .gif（或任何形式的矢量图形，以便可以更改大小）图像，高度和宽度为 100%，然后是负 z-index 属性。
回答by Kornel
There is no solution that isn't horribly ugly, like positioning image or ridiculously large border underneath the table.
没有任何解决方案不是非常丑陋，例如在桌子下方放置图像或可笑的大边框。
It depends what you need those backgrounds for. If it's decorative, then it may be better not to force it.
这取决于你需要这些背景。如果它是装饰性的，那么最好不要强迫它。
If it's to highlight some table cells, you can use color borderin addition to the background. Borders are printed.
如果要突出显示某些表格单元格，border除了背景，您还可以使用颜色。边框已打印。
If it's very important that backgrounds are printed, then you may give users a PDF to print.
如果打印背景非常重要，那么您可以为用户提供 PDF 进行打印。
回答by Jaspal Singh
I found @willert's solutiona bit consistent and easy. I have developed it further, hope it helps you guys...
我发现@willert 的解决方案有点一致和简单。我已经进一步开发了它，希望它可以帮助你们......
table {
margin-top: 20px;
border-collapse: separate;
border-spacing: 0px;
font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
table td,
table th {
background-color: transparent;
z-index: 1;
border-right: 0;
border-bottom: 0;
width: 150px;
padding-left: 5px;
overflow: hidden;
height: 12px;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: 10px -994px -996px -2px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -6px;
}
table th:before {
border-top: 999px solid #D6D6D6;
border-left: 999px solid #D6D6D6;
}
table td:before {
border-top: 999px solid #F9F9F9;
border-left: 999px solid #F9F9F9;
}
td div.grid_3{
overflow: hidden;
}
table .row td{
border-bottom: #d6d6d6 1px solid;
width: 110px;
}
回答by willert
I've been playing around to solve this problem, and CSS content generation and modern browsers seem to provide a nice solution to this problem. NOT WIDELY TESTED, FEEDBACK WELCOME!
我一直在努力解决这个问题，CSS 内容生成和现代浏览器似乎为这个问题提供了一个很好的解决方案。未经广泛测试，欢迎反馈！
table {
border-collapse: separate;
border-spacing: 0px;
}
table td,
table th {
background-color: transparent;
overflow: hidden;
z-index: 1;
border-right: 0;
border-bottom: 0;
}
table th:before,
table td:before {
content: "";
padding: 0;
height: 1px;
line-height: 1px;
width: 1px;
margin: -4px -994px -996px -6px;
display: block;
border: 0;
z-index: -1;
position:relative;
top: -500px;
}
table th:before {
border-top: 999px solid #c9c9c9;
border-left: 999px solid #c9c9c9;
}
table td:before {
border-top: 999px solid #eeeeee;
border-left: 999px solid #eeeeee;
}
You will need to handcraft the details to fit your needs.
您将需要手工制作细节以满足您的需求。
HTH
HTH
回答by Bj?rn C
Just Use !importantin your CSS and it will print, in Chrome.
只需!important在您的 CSS 中使用，它就会在 Chrome 中打印。
回答by Plummer
Judging from my research on this, you're not likely to find a CSS solution that covers everything. You might be able to apply a jQuery solution to this.
从我对此的研究来看，您不太可能找到涵盖所有内容的 CSS 解决方案。您也许可以对此应用 jQuery 解决方案。
<style>
.cell_pos {
position: relative;
}
.cell_cont {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.img_color {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
}
</style
<table>
<tr class="row1">
<td class="selected">
<div class="cell_pos">
<div id="cell_cont">Hello</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#row1 .selected).append('<img class="img_color" src="path/to/img.jpg/>');
)};
</script>
The question was a little vague so you would probably need some work around with the css with overflowand setting cell/column widths. Hope this helps.
这个问题有点含糊，因此您可能需要使用 cssoverflow和设置单元格/列宽来解决一些问题。希望这可以帮助。
回答by Saadat
For chrome you can use this:
对于 chrome，你可以使用这个：
-webkit-print-color-adjust:exact;
Or in print preview, tick the More settings->Background Graphics
或者在打印预览中，勾选更多设置->背景图形
For Firefox, you can't enable it using any CSS. You can enable it as follow (If you don't see the File, press Alt key once).
File->Page setupand tick the Print Background(color & images)
对于 Firefox，您不能使用任何 CSS 启用它。您可以按如下方式启用它（如果您没有看到文件，请按一次 Alt 键）。
文件->页面设置并勾选打印背景（颜色和图像）
回答by user2007274
This works for me and wont affect your other CSS code:
这对我有用，不会影响您的其他 CSS 代码：
@media print {
div {
background: #333333 !important;
}
}
