CSS 如何使用背景颜色打印表格（无需更改打印设置）答案

【问题标题】：CSS How to print a table with background color (without Print settings changes)CSS 如何使用背景颜色打印表格（无需更改打印设置）
【发布时间】：2011-07-03 21:47:36
【问题描述】：

目的是打印带有彩色 td-s 的表格。我需要一种适用于所有类型浏览器的方法。

有什么办法吗？

【问题讨论】：

我相当肯定大多数浏览器默认不打印背景。当您只是从 HTML 打印时，您无法更改它。您可以将其转换为 PDF，但我不知道这对您是否可行。
这可能会有所帮助：stackoverflow.com/questions/764520/…
这应该不再是问题了。我遇到这个问题是因为我有一个引导页面，并且引导程序有一个 @media print 查询，它从表格中删除背景颜色（例如条纹）。
@maria Firefox 和 Chrome 现在都提供了选项（即在 2018 年）Print Background Color 和 Background graphics 分别现在简单地完成工作。当这些选项被禁用时，所有 CSS 选项都变得无用。

标签： css html-table

【解决方案1】：

通过设置背景图像和 !important 将类应用于背景。该方法不需要设置后台打印。

HTML

CSS

.red { background-image: url('images/bg-red.jpg') !important; }

【讨论】：

【解决方案2】：

我需要在从 python 生成 pdf 的 weasyprint 库中使用它。如果您只想打印 pdf，请使用带有 !important 的 @print 属性

例如

<!DOCTYPE html>
<html>
    <head>
        <style>
            @media print {
                .a {
                    background: orange !important;
                }
                .b {
                    background: blue !important;
                }
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <td class="a">This cell has an orange background.</td>
                <td class="b">This cell has a green background.</td>
            </tr>
        </table>
    </body>

</html>

您会注意到，如果您在网络浏览器中打开它，您将看不到颜色，如果您将其打印为 pdf，您就会看到。因为这些样式应用于打印

如果您还想在浏览器中查看颜色，您可以在打印之外添加与正常样式相同的样式

<!DOCTYPE html>
<html>
    <head>
        <style>
                .a {
                    background: orange;
                }
                .b {
                    background: blue;
                }

            @media print {
                .a {
                    background: orange !important;
                }
                .b {
                    background: blue !important;
                }
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <td class="a">This cell has an orange background.</td>
                <td class="b">This cell has a green background.</td>
            </tr>
        </table>
    </body>

</html>

要打印 PDF，您只需要 @print 属性

【讨论】：

【解决方案3】：

对于 chrome，你可以使用这个：

-webkit-print-color-adjust:exact;

或者在打印预览中，设置复选框更多设置->背景图形

对于 Firefox，您无法使用任何 CSS 启用它。您可以按如下方式启用它（如果看不到文件，请按 Alt 键一次）。 文件->页面设置并设置复选框打印背景（颜色和图像）

【讨论】：

【解决方案4】：

这个愚蠢的解决方案在 Firefox 和 Chrome (Ubuntu) 上对我有用。

Firefox：打开打印对话框（快捷键：Ctrl+P）并转到Options标签，并确保勾选了Print Background Colors 选项。

Chrome：打开打印对话框（快捷键：Ctrl+P）展开More settings，勾选Background graphics。

就我的测试而言，-webkit-print-color-adjust:exact; 不适用于 Firefox，但在 Chrome 中可以使用。但是在这两种浏览器中，最终的打印选项都会覆盖所有这些。 所以你可以完全不用它。

尝试使用或不使用此处描述的各种设置打印以下示例 HTML 页面，您就会知道。

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      -webkit-print-color-adjust: exact;
    }
  </style>
</head>

<body>
  <table style="border-width:1px;width:50%;">
    <tr style="background-color:#999999">
      <td>First Row</td>
    </tr>
    <tr style="background-color:#CCCCCC">
      <td>Second Row</td>
    </tr>
  </table>

</body>

</html>

【讨论】：

【解决方案5】：

这对我有用，不会影响您的其他 CSS 代码：

@media print {
    div {
       background: #333333 !important;
    }
}

【讨论】：

【解决方案6】：

只需在您的 CSS 中使用 !important，它就会在 Chrome 中打印出来。

【讨论】：

我在 chrome 上测试了这个。 The Row 的背景颜色内联样式设置为银色。我添加了！重要；命令在最后。对 Chrome 打印没有影响。
如果用户在其打印设置中关闭了“打印背景颜色和图像”，则没有 CSS 会覆盖它，因此请始终考虑这一点。这是默认设置。
@BjörnC。谢谢老兄，你节省了我大量的时间。

【解决方案7】：

没有任何解决方案不是非常丑陋的，例如在桌子下方定位图像或大得离谱的边框。

这取决于您需要这些背景。如果是装饰性的，最好不要强求。

如果要突出显示某些表格单元格，除了背景之外，还可以使用颜色border。打印边框。

如果打印背景非常重要，那么您可以给用户一个 PDF 来打印。

【讨论】：

【解决方案8】：

您可以通过将内容作为提交类型的输入标签并将值设置为 John Doe 来为背景着色。然后使用类或样式来操纵着色。无论如何，浏览器会将前滤器更改为黑色，因此只使用浅色背景，但它可以工作（一点点）。

【讨论】：

【解决方案9】：

对于 webkit 浏览器（Chrome 和 Safari）：

body{
  -webkit-print-color-adjust:exact;
}

【讨论】：

以上在chrome浏览器中工作。我在firefox中选择了打印背景图像和颜色复选框并检查它，它没有打印背景图像。是否可以像上面那样为firefox设置css进行打印背景图片。
在Firefox等非webkit浏览器中是不可能的。
现在是color-adjust:exact。无论如何，在 FF 中。
我已经使用了上面的这些代码。我在发票上遇到问题。我已经为包含表格 tds 和 trs 的客户制作了动态账单，并且 bg 颜色不错，但是当我们打印时，trs 的 bg 颜色是白色的。所以为了解决这些问题，我使用了这些命令

【解决方案10】：

从我对此的研究来看，您不太可能找到涵盖所有内容的 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>

这个问题有点含糊，所以您可能需要使用overflow 处理css 并设置单元格/列宽。希望这会有所帮助。

【讨论】：

【解决方案11】：

            <td><img src="your_image" /></td>

【讨论】：

为什么这不起作用？对我来说似乎是唯一可行的解决方案。

【解决方案12】：

我发现@willert's solution 有点一致和简单。我已经进一步开发了它，希望它可以帮助你们......

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;
}

【讨论】：

【解决方案13】：

我一直在尝试解决这个问题，而 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;
}

您需要手工制作细节以满足您的需求。

HTH

【讨论】：

【解决方案14】：

一个特别难看的解决方案是在表格单元格中放置一个 .gif（或任何形式的矢量图形，以便可以更改大小）图像，高度和宽度为 100%，然后是负 z-index 属性。

【讨论】：

【解决方案15】：

从这里引用：CSS @media print issues with background-color;

如果用户有“打印背景颜色和图像”已关闭他们的打印设置，没有CSS会覆盖它，所以总是考虑那。这是默认设置。

一旦设置好，它就会打印出来背景颜色和图像，什么你在那里会工作。

它出现在不同的地方。在 IE9beta 可以在 Print->Page 中找到纸张选项下的选项

在 FireFox 中，它位于页面设置中 -> [格式和选项]选项下的选项卡。

【讨论】：