为啥谷歌浏览器不打印表格和单元格边框以及单元格背景颜色？
Posted
技术标签:
【中文标题】为啥谷歌浏览器不打印表格和单元格边框以及单元格背景颜色？【英文标题】：Why is Google Chrome not printing table and cell borders, and cell background colors?为什么谷歌浏览器不打印表格和单元格边框以及单元格背景颜色？ 【发布时间】：2017-11-19 02:20:36 【问题描述】：我正在维护一个使用 GWT 创建的 Web 应用程序，该应用程序过去被开发为只能在 Google Chrome 中运行。
有几个“报告”可以从系统中提取。其实现方式如下：首先，创建报表的 html 并将其显示在屏幕的一部分中（这可以正常工作）。之后，有一个按钮可以打印报告。此操作生成带有信息（在 html 表中）的 html，与创建屏幕报告的方式相同，并使用它创建一个 html 文件，然后发送到打印。
这就是怪物露脸的地方！ （tum-dum-dummmm - 戏剧音乐）。
自从 Google Chrome 更新到版本 59.0.3071.86 后，打印时，表格/单元格会失去边框和背景颜色。
我认为这可能与生成的 html 有关，但实际上如果我在打印时强制 html 为
<!DOCTYPE html>
<html>
<head>
<style>table, th, td border: 1px solid black !important;</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
表格仍然没有正确打印（这也可以在 Chrome 的打印预览中看到（是的，即使选择了打印背景图像的选项）。如果我在表格标签本身上设置表格样式，也会发生同样的事情。比如：
<table style="border: 1px solid black !important;">
我没有想法，所以我想问是否有人遇到过类似的问题，或者对我可以尝试什么有任何想法。
提前致谢。
并编辑说这与“可能重复”中的问题不同。我过去遇到过“背景颜色”问题，我已经解决了。在这种情况下（正如 code-sn-p 所示），似乎某些样式没有被解释，例如表格边框。在 chrome 59.0.3071.86 之前一切正常，所以这似乎是一个新问题，而不是“在 5 年内解决”的问题。
还有一个进一步解释的编辑：
在我的 web 应用程序的某个地方，有一个小按钮，上面写着“打印报告”。这会生成一个 html 文件，然后将其发送到打印。 我用一个相当简单的 html 替换了生成的 html 来说明我的问题。 所以，每次我按“打印报告”时，我都会“强制”这是生成的 html：
<!DOCTYPE html>
<html>
<head>
<style>table, th, td border: 1px solid black !important; body -webkit-print-color-adjust: exact; </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
注意我是如何使用的
body -webkit-print-color-adjust: exact;
另外，我尝试了一些变体，例如将表格样式设置为：
<table style="border: 1px solid black !important;">
或身体为
<body style="-webkit-print-color-adjust: exact;">
我将添加来自“html 测试平台”的图像，以显示我无处不在的 html 应该如何显示：
但是，当打印预览“弹出”时，这是我得到的：
因此，背景颜色既不显示（我相信其他 SO 用户也会发生这种情况，但他们的解决方案在这里不起作用）也不显示表格边框。
其他编辑：我尝试定义“特定于打印的 css 规则”，如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
@media print
body -webkit-print-color-adjust: exact;
table, th, td border: 1px solid black !important;
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
但我得到的结果和以前一样。另外（也许这是相关的......也许不是）如果我定义了一个表格宽度，那么该样式会在打印时正确显示，而表格边框仍然隐藏/不存在/被神奇地删除（选择一个）。
最终编辑 - 解决方法： 我无法解决问题本身，我真的不明白为什么会这样。 我能够做的是找到一个解决方法，我在这里发布它不是作为答案，但仍然希望它可以帮助某人：
我这样做的方式是：当我按下打印按钮时，我打开一个新窗口，其中只有我想要打印的 html（完全按照我想要的方式打印），然后使用 javascript 我让它在页面之后打印已加载。 这样它就可以工作，并且以正确的格式打印。
有些人可能会说这是运气，有些人可能会说这是“黑魔法”。我说“完成！下一个！” （虽然我对我一开始不理解问题的事实并不满意）。
【问题讨论】：
Print Background colours in Chrome的可能重复 昨天看到了同样的question too 不是。不过还是谢谢。 第二个问题是昨天而不是5年前的问题，它解决了他的问题。body -webkit-print-color-adjust: exact; 。如果我错了，请在打印菜单中发布 chrome 显示的图像。
再一次，它不能解决我的问题。还是谢谢。
【参考方案1】：
你试过直接在table标签里面的样式吗？
<table border="1px" bgcolor="green">
<tr>
<td>ANYTHING RANDOM
</td>
</tr>
</table>
D.
【讨论】：
以上是关于为啥谷歌浏览器不打印表格和单元格边框以及单元格背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章